Как обновить реквизит в компоненте vue

Question

Я хочу создать свой собственный флажок в vue.Я хочу использовать две иконки от fontawesome (заблокировать и разблокировать).Если мой флажок установлен, значок должен быть заблокирован, в противном случае он будет разблокирован.

Вот мой код

<template>
   <div>
      <i @click="statusChanged()" v-if="!checked" class="fas fa-lock-open lock"></i>
      <i @click="statusChanged()" v-if="checked" class="fas fa-lock lock"></i>
   </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Prop } from 'vue/types/options';
export default Vue.extend({
    props: {
        checked: {
        type: Boolean as Prop<boolean>,
    },
},
methods: {
    statusChanged() {
        this.checked = !this.checked;
    },
},
});

Я получил ошибку:

Невозможно назначить на 'проверил, потому что это константа или свойство только для чтения

Можете ли вы помочь решить эту проблему?Заранее спасибо

Обновление:

Мне удалось решить, чем проблема.Решение действительно было похоже на то, что TommyF предложил.

Вот решение:

<template>
<div>
    <i v-if="!checked" class="fas fa-lock-open lock" @click="statusChanged()"></i>
    <i v-if="checked" class="fas fa-lock lock" @click="statusChanged()"></i>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Prop } from 'vue/types/options';
export default Vue.extend({
    props: {
        checked: {
            type: Boolean as Prop<boolean>,
        },
    },
    model: {
        prop: 'checked',
        event: 'click',
    },
    methods: {
        statusChanged() {
            this.$emit('click', !this.checked);
        },
    },
});
</script>

Answer 1

Посмотрите на модификатор prop.sync.Это сделано именно для такого случая, когда вы хотите обновить родительское значение, но передать его как свойство ребенку:
https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

В основном вы помечаете опору как sync 'способен:
<Checkbox :checked.sync="foo"></Checkbox>

И чтобы обновить родителя, вы отправляете от ребенка событие update:prop:
this.$emit('update:checked', !this.checked)

Это должно помочь вам начать работу над решением:
https://codesandbox.io/s/97rl86n64