Vue.js — как обновить класс значков меток группы форм при изменении ввода

#input #data-binding #font-awesome #vuejs3 #bootstrap-5

Вопрос:

У меня есть простая форма ввода-группа (метка ввод).

В принципе, мне нужно изменить имя класса значка при изменении ввода.

Входные данные содержат заполнитель, который служит примером для пользователей и в то же время значением по умолчанию для класса значков.

 lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"gt; lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"gt; lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"gt;lt;/scriptgt;  lt;div class="input-group flex-nowrap mb-2"gt;  lt;label for="icon" class="input-group-text" title="Icon"gt;  lt;i class="fas fa-sitemap"gt;lt;/igt;  lt;span class="sr-only"gt;Iconlt;/spangt;  lt;/labelgt;  lt;input  id="icon"  type="text"  class="form-control"  placeholder="fas fa-sitemap"  v-model="form.icon"  /gt; lt;/divgt;