Vue.filter works in the first version and doesn't work in the second. What's wrong?

Question

Vue.js

The demo has a character replacement filter, it works fine on the first version, but an error occurs on the second, what am I doing wrong?
And the second question: how best to implement so that the replacement of the character occurs in the same window where the text is written, and not duplicated on another element.
Thanks in advance.

Answer 1

The second one gives me an error, what am I doing wrong?

Trying to use a cut feature.

how best to implement so that the replacement of the character occurs in the same window

Use watch:
<textarea v-model="input"></textarea>

data: () => ({
  input: '',
}),
watch: {
  input(v) {
    this.input = v.split('1').join('2');
  },
},

Or listen to the input event:

<textarea v-model="input" @input="onInput"></textarea>

data: () => ({
  input: '',
}),
methods: {
  onInput() {
    this.input = this.input.split('1').join('2');
  },
},

Answer 2

1. Add the input variable to the data section
2. Remove the extra {}