Adjust width of input field to its input, get rid of right space

Question

I am using vue

I want to auto increment the input by using my input component.

<input
      type="text"
      v-model="inputValue"
      :placeholder="placeholder"
      oninput="this.size = this.value.length"
      @keyup="handleInput"
      @blur="handleBlur"
      style="max-width: 100%" />

My Problem is that the content has always more space than needed. example

When using a span the problem doesn't seem to appear.

  <span
        class="input"
        role="textbox"
        :data-placeholder="placeholder"
        oninput="this.size = this.value.length"
        contenteditable="true"
        @keyup="handleInput"
        style="max-width: 100%; min-width: 100%">
        {{ value }}
      </span>

How can I get rid of this space using an Input?

<input
      type="text"
      v-model="inputValue"
      :placeholder="placeholder"
      oninput="this.size = this.value.length"
      @keyup="handleInput"
      @blur="handleBlur"
      style="max-width: 100%" />