Filter snippet for vue.js

countMixin.js

export const countMixin = {
  filters: {
    reverseText(value) {
      return value
        .split("")
        .reverse()
        .join("");
    }
  },

  computed: {
    textReverseComputed() {
      return this.textCom
        .split("")
        .reverse()
        .join("");
    },

    textCountComputed() {
      return this.textCount.concat(this.textCount.length);
    }
  }
};

MixinsAndFilters.vue

<template>
  <div class="container" id="app">
    <div class="row">
      <div class="col">
        <h1>Filters & Mixins</h1>
        <!-- Local filter which reverses the text that is applied -->
        <input type="text" class="form-control" v-model="text"/>
        <p>{{text|reverseText}}</p>

        <!-- Build a global filter that counts the length of a word + appends it -->
        <input type="text" class="form-control" v-model="textCount"/>
        <p>{{textCount|countText}}</p>

        <!-- Do the same as in one, but with computed props -->
        <input type="text" class="form-control" v-model="textCom"/>
        <p>{{textReverseComputed}}</p>

        <!-- Do the same as in two, but with computed props -->
        <input type="text" class="form-control" v-model="textCount"/>
        <p>{{textCountComputed}}</p>

        <!-- Now outsource the compo -->
      </div>
    </div>
  </div>
</template>

<script>
// Mixins are code snippets that are used across several vue instances!!
import {countMixin} from "./countMixin"; 

export default {
  name: "App",
  data() {
    return {
      text: "",
      textCount: "",
      textCom: "Test",
    };
  },
  mixins: [countMixin]
  // Mixins are code snippets that are used across several vue instances!!

};
</script>