How to render this horizontally?

<template>
  <div>
    <template v-for="i in 9">
      <div v-if="i != 2 && i != 3 && i != 7 && i != 8 && i != 9" :key="i">
        <v-chip>
          {{ i }}
        </v-chip>
      </div>
      <v-chip :key="i" v-else>
        {{ i }}
      </v-chip>
    </template>
  </div>
</template>

This snippet generates this output

How to render exactly this output but horizontally to get this

if you consider using an array from data option, this might work

<template>
  <div>
    <template v-for="(i, index) in items">
      <div v-if="!isNaN(i)" :key="index">
        <v-chip>
          {{ i }}
        </v-chip>
      </div>
      <div style="display: inline" v-else :key="index">
        <v-chip v-for="(n, index) in i" :key="index">
          {{ n }}
        </v-chip>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      items: [1, [2, 3], 4, 5, 6, [7, 8, 9]],
    };
  },
};
</script>