Change view by using computed property - vue.js

Question

I have component of ViewControls, where have switchControls with which I can get the index of the clicked button. For example, i clicked first btn, and snippetValue will be 0, and so on.
<template>
<SwitchControls v-model="snippetValue">
<button>
<i class="icon list" />
</button>
<button>
<i class="icon grid" />
</button>
</SwitchControls>
</template>
Question, how can i bind to a 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"/>

Answer 1

Try to bind the v-model directive from SwitchControls directly with computed property currentValue :
<template>
<SwitchControls v-model="currentValue">
<button>
<i class="icon list" />
</button>
<button>
<i class="icon grid" />
</button>
</SwitchControls>
</template>
emits: [ "update:modelValue" ],
setup (props, { emit }) {
const currentValue = computed({
get: () => props.modelValue,
set: (val: number) => {
emit("update:modelValue", val === 0 ? "list" : "grid")
},
})
},