Как собрать чекбоксы в массиве в VUE3?

Question

[evomed]

Имеется компонент над которым думаю:

<script setup>

import {reactive, ref} from "vue";

const categories = ref(null);

const form = reactive({
    categories: [],
});

const fetchData = () => {

    axios.get(route('categories')).then((response) => {

        categories.value = response.data.categories;

    }).catch(error => {
    });

};

</script>

<template>
                <div v-for="category in categories" :key="category.id">
                    <input v-model="form.categories"
                           class="form-check-input"
                           name="categories[]"
                           :value="category.id"
                           type="checkbox"
                    >
                    {{form.categories}}
                </div>
</template>

Цель, чтобы пользователь выбрал нужные ему категории с помощью чекбоксов.

Как я пробую реализовать: фетчатся категории у которых есть айдишники в categories. Далее я пробую собрать выбранные чекбоксами категории в form.categories и там получается только одно значение всегда (последний чекбокс). В V2 нечто похожее (тольео со script и categories в data) работало без проблем. Т.е. в такой конструкции в VUE2 работает:

<script>

export default {

    data() {
        return {
            categories: []
        }
    },

Answer 1

[evomed]

Получилось в обычном script (без setup) - как в примере выше. В таком свойстве categories чекбоксы успешно собираются в эррэй. Почему так происходит хз. Отмечать ответ не буду, может кто поделится вариантом, как собрать в script setup VUE3.