How to display PHP data in vue component?

Question

PHP

Vue.component('add-edu', {
  template: `
  <div>
    <div class="gray_dashed">	
    </div>
    <div class="profileForm_row">
      <label class="profileForm_label" for="">Образование</label>
        <select  class="profile_select" name="education[]">
          <option value="" selected readonly   <?php if(isset($_POST['education'])){if($_POST['education']=='') echo ' selected="selected"';}?> >Укажите образование</option>
          <option value="Высшее" <?php if(isset($_POST['education'])){if($_POST['education']=='Высшее') echo ' selected="selected"';}?>>Высшее</option>
          <option value="Неоконченное высшее" <?php if(isset($_POST['education'])){if($_POST['education']=='Неоконченное высшее') echo ' selected="selected"';}?>>Неоконченное высшее</option>
          <option value="Среднее" <?php if(isset($_POST['education'])){if($_POST['education']=='Среднее') echo ' selected="selected"';}?>>Среднее</option>
          <option value="Среднеспециальное" <?php if(isset($_POST['education'])){if($_POST['education']=='Среднеспециальное') echo ' selected="selected"';}?>>Среднеспециальное</option>
          <option value="Без образования" <?php if(isset($_POST['education'])){if($_POST['education']=='Без образования') echo ' selected="selected"';}?>>Без образования</option>
        </select>
    </div> 
    <div class="profileForm_row">
      <label class="profileForm_label" for="">Город</label>
      <input class="profileForm_input" placeholder="Город" type="text" name="edu_city[]" value="<?php echo @$data['edu_city']; ?>">
    </div>
    <div class="profileForm_row">
      <label class="profileForm_label" for="">Учебное заведение</label>
      <input class="profileForm_input" placeholder="Учебное заведение" type="text" name="edu_name[]" value="<?php echo @$data['edu_name']; ?>">
    </div>
    <div class="profileForm_row">
      <label class="profileForm_label" for="">Факультет</label>
      <input class="profileForm_input" placeholder="Факультет" type="text" name="faculty[]" value="<?php echo @$data['faculty']; ?>">
    </div>
    <div class="profileForm_row">
      <label class="profileForm_label" for="">Специальность</label>
      <input class="profileForm_input" placeholder="Специальность" type="text" name="specialty[]" value="<?php echo @$data['specialty']; ?>">
    </div>
    <div class="profileForm_row">
      <label class="profileForm_label" for="">Дата окончания</label>
      <p><input class="profile_select profile_select__date" name="edu_date[]" type="month" list="monthList"  value="<?php echo @$data['edu_date']; ?>"></p>
      <datalist id="monthList">
      </datalist>
    </div>
  </div>
  `
});

Problem : the component displays, but php outputs the data as just code text. How to make php code work, not just text

Answer 1

Mixed the worst of both.
Form data in PHP in json.
Display them on vue.

Answer 2

php code is executed in files with php extension.

Answer 3

To do this, use -
https://ru.vuejs.org/v2/guide/components-props.html
https://medium.com/@m_ramsden/passing-data-from-la...