Unexpected mutation of "assignment" prop

but if you look at the video here: https://laracasts.com/series/learn-vue-3-step-by-step/episodes/7

10:54 ( 10 minutes and 54 seconds in)

the instructor is mutating the prop in the v-model... I am following along I just moved my pages out of .js to.vue

I put

v-model="assignment.complete"

in my form input

I am now getting: error 'v-model' directives require the attribute value which is valid as LHS

either true or false, false by default

Home

<template>
  <div class="home">
    <AssignmentItems />
  </div>
</template>

<script>
import AssignmentItems from "@/components/AssignmentItems.vue";

export default {
  name: "HomeView",
  components: {
    AssignmentItems,
  },
};
</script>

AssignmentsList.vue

<template>
  <section v-show="assignments.length">
    <h2 class="font-bold mb-2">{{ title }}</h2>
    <ul class="border rounded border-gray-600 divide-y divide-gray-600">
      <AssignmentItem
        v-for="assignment in assignments"
        :key="assignment.id"
        :assignment="assignment"
        v-model="assignment.complete"
      />
    </ul>
  </section>
</template>

<script>
import { AssignmentItem } from "@/components/AssignmentItem.vue";
export default {
  components: { AssignmentItem },
  props: {
    assignments: Array,
    title: String,
  },
};
</script>

AssignmentItems.vue

<template>
  <section class="space-y-6">
    <AssignmentList
      :assignments="filters.inProgress"
      title="In Progress"
    ></AssignmentList>
    <AssignmentList
      :assignments="filters.completed"
      title="Completed Assignments"
    ></AssignmentList>
    <form @submit.prevent="add">
      <div class="border border-gray-600 text-black">
        <input
          v-model="newAssignment"
          placeholder="New Assignment"
          class="p-2"
        />
        <button type="submit" class="bg-white p-2 border-l">Add</button>
      </div>
    </form>
  </section>
</template>

<script>
import AssignmentList from "@/components/AssignmentList.vue";
export default {
  components: {
    AssignmentList,
  },
  data() {
    return {
      assignments: [
        { id: 1, name: "do homework", complete: false },
        { id: 2, name: "finish book", complete: false },
        { id: 3, name: "learn code", complete: false },
        { id: 4, name: "Walk the dog", complete: false },
      ],
      newAssignment: "",
    };
  },
  computed: {
    filters() {
      return {
        inProgress: this.assignments.filter(
          (assignment) => !assignment.complete
        ),
        completed: this.assignments.filter((assignment) => assignment.complete),
      };
    },
  },
  methods: {
    add() {
      alert("New assignment added!");
      this.assignments.push({
        name: this.newAssignment,
        completed: false,
        id: this.assignments.length + 1,
      });
    },
  },
};
</script>

AssignmentItem.vue

<template>
  <li>
    <label class="p-2 flex justify-between items-center"
      >{{ assignment.name }}
      // eslint-disable-next-line
      <input
        type="checkbox"
        v-model="$emit('update:modelValue', event.target.value)"
        class="ml-2"
      />
    </label>
  </li>
</template>

<script>
export default {
  props: {
    assignment: Object,
    modelValue: String, // Boolean
  },
};
</script>

AppButton.vue

<template>
  <button
    :class="{
      'border rounded p-5 py-2 disabled:cursor-not-allowed disabled:bg-red-300': true,
      'bg-blue-300 hover:bg-blue-500': type === 'primary',
      'bg-green-300 hover:bg-green-500': type === 'secondary',
      'bg-red-300 hover:bg-red-500': type === 'danger',
      'bg-yellow-300 hover:bg-yellow-500': type === 'warning',
      'is-loading': processing,
    }"
    :disabled="processing"
  >
    <slot />
  </button>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "primary",
    },
    processing: {
      type: Boolean,
      default: false,
    },
  },
};
</script>