Значение данных не отображается из JSON-файла на html-странице после отправки формы

Привет всем, мне нужна некоторая помощь по поводу Axios & VUE после отправки формы на моей веб-странице Я был перенаправлен обратно на эту страницу. До того, как форма была отправлена, "purposeofvisit" не был пуст в html-файле, но после отправки формы и перенаправления обратно на html-страницу он пуст. Я пытаюсь получить доступ к вложенному объекту "purposeofvisit" значение

let patients = new Vue({
  el: "#patients",
  data: {
    patients: [],
  },

  mounted: function () {
    axios
      .get("http://localhost:3000/patients")
      .then((response) => {
        

        userParticulars = response.data;

        this.patients = userParticulars;

        console.log(this.purposeofvisit);
      })
      .catch((error) => {
        console.log(error);
      });
  },
 
});

<tbody v-for="(user, index) in patients" :key="index">
  <tr>
  <td>{{user.appointments[0].purposeofvisit}}</td>
  </tr>
</tbody>

Это файл JSON, к которому я обращаюсь

{
  "patients": [
    {
      "id": 1,
      "name": "John", 
      ],
      "appointments": [
        
          {
            "purposeofvisit": "Consultation",       
          }
        
      ]
}