Vue JS and VALUE in input how to make friends?

Question

HTML

Hi all.
The code I pass the ID of the element - he sees the name of this, I was convinced <? echo $editElName ?>
but the input is not passed (the field is not filled)
if I remove v-model="name" from the input, then the name appears normally, but then the vue script does not work on the field.
The code itself:

<?     $editPage = $APPLICATION->GetCurPageParam();
        $arElementID = preg_replace("/[^0-9]/", '', $editPage);
        if (!empty($arElementID)) { ?>
            <input type="hidden" name="ELEMENT_ID" value="<?= $arElementID ?>">
            <?
            //ПОЛУЧАЕМ ДАННЫЕ ОБ ЭЛЕМЕНТЕ
            $editElement = CIBlockElement::GetList(
                Array(),
                Array("IBLOCK_ID" => $IBLOCK_ID, "ID" => $arElementID),
                false,
                false,
                Array(
                    'NAME'
                )
            );
            while ($ar_fields = $editElement->GetNext()) {
               $editElName =  $ar_fields['NAME'];
              
            }
        }
        ?>

<div class="app">
<form id="app" @submit="checkForm" name="add_my_bulletin" action="add_form_result.php" method="POST" enctype="multipart/form-data">
    <p v-if="errors.length">
      <strong>Пожалуйста исправьте указанные ошибки:</strong>
      <ul>
        <li v-for="error in errors" class="error"><strong>{{ error }}</strong></li>
      </ul>
    </p>	
    <div class="form-group">
      <label for="name" class="col-sm-9 col-form-label col-form-label-sm"><strong>Название(<font color="red">Обязательно</font>):</strong></label>
      <div class="col-12">
        <input v-model="name" id="name" type="text" name="name" maxlength="255" value="<?=$editElName ?>" class="form-control form-control-sm" placeholder="Введите название">
      </div>
    </div>

      <div class="form-group">
        <div class="col-9">
          <input class="btn btn-primary pull-right" type="submit" value="Отправить">
          <p v-if="errors.length">
            <strong>Пожалуйста исправьте указанные ошибки:</strong>
            <ul>
              <li v-for="error in errors" class="error"><strong>{{ error }}</strong></li>
            </ul>
          </p>		
        </div>
        <script>
          const app = new Vue({
            el: '#app',
            data: {
              errors: [],
              name: null
            },
            methods: {
              checkForm: function (e) {
                if (this.name) {
                  return true;
                }

                this.errors = [];

                if (!this.name) {
                  this.errors.push('Требуется указать название.');
                }
                e.preventDefault();
              }
            }
          })
        </script>
      </div>
               </form>
  </div>

what can be done?

Answer 1

You don't understand how Vue reactivity works.
v-model establishes a two-way relationship between the input field value and the name data element.
When you initialize your application, you declare a name element with a value of null. This value is written as the value of the input.
Set the data to the desired value.