title: How to update props in vue component
body: <p>I want to create my own checkbox in Vue. I want to use two icons from fontawesome (lock and unlock). When my checkbox is checked then icon should be locked otherwise unlocked.</p>
  <p>Here is my code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
     &lt;div&gt;
        &lt;i @click=&quot;statusChanged()&quot; v-if=&quot;!checked&quot; class=&quot;fas fa-lock-open lock&quot;&gt;&lt;/i&gt;
        &lt;i @click=&quot;statusChanged()&quot; v-if=&quot;checked&quot; class=&quot;fas fa-lock lock&quot;&gt;&lt;/i&gt;
     &lt;/div&gt;
  &lt;/template&gt;
  &lt;script lang=&quot;ts&quot;&gt;
  import Vue from 'vue';
  import { Prop } from 'vue/types/options';
  export default Vue.extend({
      props: {
          checked: {
          type: Boolean as Prop&lt;boolean&gt;,
      },
  },
  methods: {
      statusChanged() {
          this.checked = !this.checked;
      },
  },
  });
  </code></pre>
  <p>I received an error:</p>
  <blockquote>
  <p>Cannot assign to 'checked' because it is a constant or a read-only property</p>
  </blockquote>
  <p>Can you help resolve this issue?</p>