JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <button @click="focusInput">focus</button>
  <div class="input">
    <input type="text" ref="code" @input="input" v-model="code">
  </div>
  <div class="code">
    <span>{{ symbol1 }}</span>
    <span>{{ symbol2 }}</span>
    <span>{{ symbol3 }}</span>
    <span>{{ symbol4 }}</span>
  </div>
</div>

SCSS

#app {
  position: relative;
  display: inline-block;
}

.code {
  display: flex;
  
  span {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 0px 5px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.input input {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JavaScript

new Vue({
	el: '#app',
  data() {
		return {
    	code: '',
    }
  },
  computed: {
  	symbol1() { return this.code[0]; },
    symbol2() { return this.code[1]; },
    symbol3() { return this.code[2]; },
    symbol4() { return this.code[3]; },
  },
  methods: {
  	input() {
    	if( this.code.length > 4 ) this.code = this.code.slice(0, -1);
    },
  	focusInput() {
    	this.$refs.code.focus();
    }
  }
})