Изменение видимости с помощью computed свойства

У меня есть компонент ViewControls, где находится другой компонент SwitchControls, он нам помогает выбрать индекс выбранной кнопки, то есть, кликнув на первую кнопку snippetValue = 0, на вторую snippetValue = 1

    <template>
    <SwitchControls v-model="snippetValue">
      <button>
        <i class="icon list" />
      </button>
      <button>
        <i class="icon grid" />
      </button>
    </SwitchControls>
    </template>

Вопрос, как мне привязать значение к snippetValue(0 - 'list', 1 - 'grid') and emit params

   emits: [ "update:modelValue" ],
    setup (props, { emit }) {
     const snippetValue = ref(0)

     const currentValue = computed({
       get: () => props.modelValue,
       set: (val: number) => {
         if (val === 0) {
           emit("update:modelValue", "list")
         }
         else {
           emit("update:modelValue", "grid")
         }
       },
     })
    },

parent.vue

   <ViewControls
      v-model="snippetVariant"
      @update:model-value="switchTab"
    />

    async function switchTab (status: string): Promise<void> {
     snippetVariant.value = status
    }