SOURCE

Vue.component('self-input', {
	props: {
    value: { type: [String, Number] },
    maxlength: [String, Number]
  },
  data() {
    return {
      currentValue: (this.value === undefined || this.value === null) ? '' : this.value,
      isOnComposition: false,
      valueBeforeComposition: null,
    };
  },
  computed: {
    textCount() {
      return this.currentValue.length || 0;
    }
  },
  template: `
    <div class="self-input">
      <input
        class="self-input__inner"
        type="text"
        v-model="currentValue"
        :maxlength="maxlength"
      />
			<span class="self-input__calculator">
        <span class="self-input__calculator--current">{{ textCount }}</span>
        <span class="self-input__calculator--max">{{ maxlength }}</span>
      </span>
    </div>`
});

new Vue({
	el: '#main',
  data: {
  	input: ''
  }
});

<main id="main" style="background: #FFF;padding: 20px;">
  <self-input v-model="input" maxlength="40">
  </self-input>
  <br><br>
  <p>
    Input Val：{{ input || 'null' }}
  </p>
</main>

.self-input {
  $--calculator-width: 56px;
  & {
    position: relative;
    display: inline-block;
  }
  &__inner {
    padding-left: 5px;
    line-height: 28px;
    width: 220px;
    padding-right: $--calculator-width;
    font-size: 14px;
  }
  &__calculator {
    & {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      display: inline-flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 5px;
      width: $--calculator-width;
      box-sizing: border-box;
    }
    &--current {
      &::after {
        content: "/";
        display: inline-block;
      }
    }
    &--max {
      color: gray;
    }
  }
}