Vue ref change does not apply changes to the component after update

Question

I have a form implemented with vue3. The form consists of three text inputs and a checkbox group.

I am using bootstrap-vue form and it's checkbox-group for this.

I call an api to set default values on the form, after the api responds I update the ref like the code below and all three text inputs get updated just fine.

The problem is with the checkbox group component. The checked items won't get checked although they are inside of the tagList ref.

// I set the formValues ref and api call to get default values in this composable.
// taglist will be a list of strings: tagList = ['example']
  const formValues = ref<IArticleFormValues>({
    title: '',
    body: '',
    description: '',
    tagList: [],
  });

  const { data, isFetching } = useQuery({
    queryKey: ['fetchArticleBySlug', slug],
    queryFn: () => fetchSingleArticleService(slug)
  });

  watch(data, () => {
    if (data.value?.article) {
      formValues.value = {
        ...data.value.article,
        tagList: data.value.article.tagList.map((item) => item),
      };
    }
  });

// I then inject this data using vue inject like this
provide(formInjectionKey, {  formValues });

Here is the checkbox-group component. tags is just another list of options in this format.

tags = [{text:'example',value:'example'}]

also tagList will be like this.

tagList = ['example']

<script setup lang="ts">
import CustomCheckboxGroup from '@/components/DesignSystem/components/CustomCheckboxGroup.vue';
import { inject } from 'vue';

const { formValues } = inject(formInjectionKey);

</script>

<template>
<CustomCheckboxGroup v-else :options="tags" v-model="formValues.tagList" />
</template>

And here is the CustomCheckboxGroup component.

// CustomCheckboxGroup.vue
<script setup lang="ts">
defineProps<{ value?: any[]; options: any[] }>();
</script>

<template>
  <b-form-group>
    <b-form-checkbox-group
      :value="value"
      @input="$emit('input', $event)"
      :options="options"
      v-bind="$attrs"
      stacked
    ></b-form-checkbox-group>
  </b-form-group>
</template>

Answer 1

The checkbox inputs use a different prop for setting their checked value. Use :checked="value" instead of :value="value"