How can I change the selector?

Question

Vue.js

How can I change the selector, that is, instead of div, to become input? On jquery, it’s roughly clear how to do it $('div').html('<intput type="text">');
, but the question is how to do it in vue? or if it is not safe from xss is not safe, then approximately how to make it so that there is a normal implementation. That is what I want to do.
Let's say there is a div and information is stored there, just like in exel and everything connected with it.
You do a double click and you can edit the field, as you edited, you click in another place and the data is saved in the
cell vue:10, but I don't understand how to change the selectors

<template>
  <transition name="modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">

          <div class="modal-body">
              <div class="form-group row">
                <div class="col-sm-4">ФИО</div>
                <div class="col-sm-6" @dblclick="editField('full_name')">{{ fullName }}</div>
              </div>
              ...
          </div>

          <div class="modal-footer">
              <button class="modal-default-button btn btn-primary" @click="$emit('close')">
                Закрыть
              </button>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    editField(fields){
      console.log(fields);
    }
  },
  computed: {
    fullName: function(){
      let item_ = this.$props.item;
      return `${item_.last_name} ${item_.name} ${item_.patronymic}`;
    }
  }
}
</script>

<style scoped>
...

</style>

Answer 1