Custom single checkbox doesn't work when inside <Form /> with v-model

[logaretm]

Discussed in #3894

^{Originally posted by rieg-ec August 12, 2022}
I'm having an issue with a custom checkbox i made. I want it to work like a native checkbox, and also when binding with v-model. Here's the code:

<template>
  <label class="flex flex-row items-start cursor-pointer">
    <input
      :name="name"
      :value="value"
      :checked="checked"
      @change="handleChange"
      type="checkbox"
      class="mt-1 mr-2"
    >
    <div class="flex flex-col">
      <span class="text-base">
        {{ label }}
      </span>
      <span
        v-if="errorMessage"
        class="text-base text-red-500 mt-0.5"
      >
        {{ errorMessage }}
      </span>
    </div>
  </label>
</template>

<script>
import { defineComponent, toRefs } from 'vue';
import { useField } from 'vee-validate';

export default defineComponent({
  name: 'kalio-checkbox',
  inheritAttrs: false,
  props: {
    label: { type: String, required: true },
    name: { type: String, required: true },
    value: { type: [Boolean, String, Object], default: true },
    uncheckedValue: { type: [Boolean, String, null], default: false },
    modelValue: { type: [Boolean, String, Object, Array], default: null },
    rules: { type: [String, Object], default: null },
  },
  setup(props, { attrs }) {
    const { name, rules } = toRefs(props);
    const { handleChange, checked, errorMessage } = useField(name, rules, {
      type: 'checkbox',
      checkedValue: props.value,
      uncheckedValue: props.uncheckedValue,
    });

    if (attrs.checked || attrs.checked === '' || props.modelValue === props.value) {
      handleChange(props.value);
    }

    return {
      checked,
      errorMessage,
      handleChange,
    };
  },
});
</script>

It works perfect. The only way it isn't currently working, is when inside a <Form /> and i pass v-model to it.

with this code:

<Form
    class="flex flex-col gap-y-7"
>
  <kalio-checkbox
      name="name"
      v-model="jobOffer.active"
      label="v-model binded checkbox"
  />
</Form>

the behaviour is the following:

Screen.Recording.2022-08-12.at.15.31.24.mov

For some reason, when checking it sets the value to true, then instantly switchs to false. When unchecking it doesn't do anything.
if i add another checkbox, with the same name and v-model, it works as it is supposed. Any ideas on what is wrong here?

Demo

stackblitz.com/edit/vue-gfdfwg?file=src/App.vue