Сделайте текст доступным для редактирования / только для чтения на основе ввода с помощью Vue Js

Я пытаюсь добиться чего-то, где в данном вводе я делаю строку редактируемой или не редактируемой (только для чтения) в зависимости от контекста текста в vue js.

Например : У меня есть текст: Меня зовут $ John Doe $ Теперь мой код vue js должен повторять строку, и текст между $ можно редактировать.

HTML:
<template>
     <textarea cols = "10" rows = "10" disabled>{{q | makeTextEditableByCondition}}</textarea>
<input type = "text" v-model = "editText">
</template>
<script>
    export default {
       data() {
        q : "My name is $John Doe$ from NYC,
        editText: null,
        disabled: true
     }
filters:{
  makeTextEditableByCondition(text){
      let splittedText = text.split("$");
      let this.editText = splittedText[1]
      splittedText.splice(1,1)
      return splittedText.join(" ")
    }
</script>

Но это все еще усложняет процесс, и я не добиваюсь должного результата.

Любая помощь будет высоко оценена