title: How to format the date on typing in an input field in vuejs with moment?
body: <p>I have a text field containing the date value in (MM/DD/YYYY) format. Whenever I type 01242022, it should be autoformatted and shown as 01/24/2022. I tried the following way where the value is shown as expected, but I want it in real-time. This is working when we change the focus of the input element. Any help is appreciated. Thanks</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> Vue.filter("formatDate", function (value) {
          let dateValue = value;
          if (dateValue.length === 2 || dateValue.length === 5) {
            dateValue = value + "/";
          }
          return dateValue;
        });
        const app = new Vue({
          el: "#app",
          data() {
            return {
              date: new Date(),
            };
          },
          computed: {
            dateVal: {
              get() {
                // eslint-disable-next-line no-extra-boolean-cast
                if (!!this.date) return moment(this.date, "MMDDYYYY").format("L");
                return this.date;
              },
              set(value) {
                this.date = moment(value, "MMDDYYYY").format("L");;
              },
            },
          },
          methods: {
            onInput(e) {
              this.dateVal = this.$options.filters.formatDate(e.target.value);
            },
          },
        });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
      &lt;script src="https://momentjs.com/downloads/moment.min.js"&gt;&lt;/script&gt;
      &lt;div id="app"&gt;
        &lt;input
          type="text"
          v-model.lazy="dateVal"
          maxlength="10"
        /&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>