Render content based on attributes of other components

[dbzx10299]

Vercel uses their own component design system and they have this JSX component for rendering a grid

import { Grid } from 'geist/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <Grid.System guideWidth={1} unstable_useContainer>
      <Grid columns={3} rows={4}>
        <Grid.Cell column="1/2" row="1/3" solid>
          1
        </Grid.Cell>
        <Grid.Cell column="3/4" row="1/2" solid>
          2
        </Grid.Cell>
        <Grid.Cell column="2/3" row="2/4">
          3
        </Grid.Cell>
        <Grid.Cell column="1/2" row="4/5" solid>
          4
        </Grid.Cell>
        <Grid.Cell column="3/4" row="3/5" solid>
          5
        </Grid.Cell>
      </Grid>
    </Grid.System>
  );
}

how could we implement something in vue where we render certain content in the template based upon the presence of a component attribute. For example

<Grid>
  <GridCell solid/>
  <GridCell />
  
  <template v-for="cell in $refs.gridCells">
  <!— do something based upon presence of attribute solid —>
</template>
</Grid>

I am not looking for a complete solution but rather a way to get some ideas flowing regarding where to start.