Как заполнить переменную данных vuejs с помощью json из функции?

У меня есть проект, который использует jQuery, и у меня есть много функций, возвращающих json, и я пытаюсь заполнить переменную данных некоторыми тестовыми данными, но когда я перебираю данные, я ничего не получаю.

Я проверил, что мой вызов ajax возвращает данные json, и это так, и я как бы не понимаю, почему ничего не возвращается

<div id = "app">
   <template v-for = "person in persons">
       <div>
           {{ person.FirstName }}
       </div>
   </template>
</div>

<script>
    new Vue({
        el: '#app',
        created: function () {
            this.GetUserDetails();
        },
        data: {
            persons: []
        },
        methods: {
            GetUserDetails() {
                this.persons = CommonFunctions.GetJSON("Person");
            }
        }
    });
</script>

Вот некоторые из Person json,

[{
    "id": 1,
    "FirstName": "Auroora",
    "LastName": "Kosel",
    "gender": "Female"
  },
  {
    "id": 2,
    "FirstName": "Nevins",
    "LastName": "Rulf",
    "gender": "Male"
  },
  {
    "id": 3,
    "FirstName": "Silvana",
    "LastName": "Cragoe",
    "gender": "Female"
 }]

** РЕДАКТИРОВАТЬ ** Вот функция GetJSON

var CommonFunctions = {
    GetJSON: (whichOne) => {
        $.ajax({
            type: "GET",
            url: "../Scripts/" + whichOne + "JSON.json",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                return data;
            }
        });
    }
}