Nuxt TypeScript: Cannot assign to 'name' because it is a read-only property

Question

<template lang="pug">
.bd-solid.bdw-1.bdc-teal.p-10.m-10.ta-c
        h4.fs-32 📜
        p.mt-10 > {{name}}
        p.mt-10 > {{reverse()}}
        button.fs-24.p-5.mt-10(@click='change') 💱
</template>

<script lang="ts">
import Vue from "vue"
export default Vue.extend({
    props: {
        name: {
            type: String,
            default: 'abcd'
        }
    },
    methods: {
        reverse() {
            return this.name.split('').reverse().join('');
        },
        change() {
            this.name = 'aaa';
        }
    },
})
</script>

How to get rid of this Error?

• I use Nuxt, TypeScript, Pug, Sass.
• I am new with Nuxt, some syntax and function I may not used to.

TS2540: Cannot assign to 'name' because it is a read-only property.
    56 |                },
    57 |                change() {
  > 58 |                        this.name = 'aaa';
       |                             ^^^^
    59 |                }
    60 |        },
    61 |

This code as well as the details, what stackoverflow expected code more than details with their auto detect feature?

Answer 1

I think it's a bad idea to change prop Name inside component, you probably should change it inside another component where this one is used