如何限制用户在Vuejs中只能输入30个字符？

<template>
  <div>
    <input v-model="limitedInput" />
    <p>Remaining characters: {{ remaining }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawInput: ''
    };
  },
  computed: {
    limitedInput: {
      get() {
        return this.rawInput;
      },
      set(value) {
        this.rawInput = value.slice(0, 30);
      }
    },
    remaining() {
      return 30 - this.rawInput.length;
    }
  }
};
</script>

<template>
  <div>
    <input v-model="rawInput" />
    <p>Remaining characters: {{ remaining }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawInput: ''
    };
  },
  watch: {
    rawInput(newValue) {
      if (newValue.length > 30) {
        this.rawInput = newValue.slice(0, 30);
      }
    }
  },
  computed: {
    remaining() {
      return 30 - this.rawInput.length;
    }
  }
};
</script>

<template>
  <div>
    <input v-model="rawInput" maxlength="30" />
    <p>Remaining characters: {{ 30 - rawInput.length }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawInput: ''
    };
  }
};
</script>

<template>
  <div>
    <input v-model="rawInput" @paste="handlePaste" />
    <p>Remaining characters: {{ 30 - rawInput.length }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawInput: ''
    };
  },
  methods: {
    handlePaste(event) {
      const pastedText = (event.clipboardData || window.clipboardData).getData('text');
      const newText = this.rawInput.slice(0, 30 - pastedText.length) + pastedText;
      this.rawInput = newText.slice(0, 30);
    }
  }
};
</script>