Is It Possible To Create An Instance Of A Variable That's Being Displayed With Data Binding?

My function counts the amount of characters within an input. This function is used on multiple inputs. The function keeps track of character count for each input individually. The

Solution 1:

May I propose a component?

Vue.component("counted-textarea", {
  props:["maxCharacters", "rows", "value"],
  template: `
    <div>
      <textarea v-model='taValue' :rows='rows' @input='$emit("input", taValue)'></textarea>
      <span :class="{overMax: isOverMax}">Character Count: {{ remaining }}</span>
    </div>`,
  data(){
    return {
      taValue: this.value
    }
  },
  computed:{
    isOverMax(){
      if (!this.taValue)
        returnfalse;

      return (this.maxCharacters - this.taValue.length) < 0
    },
    remaining(){
      if (!this.taValue)
        returnthis.maxCharacters;

      returnthis.maxCharacters - this.taValue.length
    }
  }
})

Used like this in your template:

<counted-textarea:max-characters="50"rows="5"v-model="myTextValue"></counted-textarea>

Example.