данные отображаются в консоли, но не в шаблоне vue

Question

Я пытаюсь получить некоторые данные с помощью VUE из API, который я создал с помощью Laravel Resource. Массив в данных отлично заполняется и отображается в консоли. Но когда я пытаюсь показать данные в шаблоне в цикле v-for с помощью v-bind, он ничего не показывает. Если я очищаю кеш в моем браузере, он все равно не показывает никаких данных. Но если я очищаю кэш в своем браузере, находясь на другой странице, а затем возвращаюсь на страницу, где шаблон vue использует кнопку назад, данные сохраняются до тех пор, пока я не обновлюсь.

Вот код в шаблоне:

<template>
    <div>
        <h2>Feeds</h2>
        <div class="card card-body" >
          <ul>
            <li v-for="feed in feeds" v-bind:key="feed.id">
                <h3>{{feed.title}}</h3>
                <p>{{feed.body}}</p>
            </li>
          </ul>
        </div>
    </div>    
</template>

А вот мой сценарий:

export default {
data(){
    return {
        feeds: []
    }
},
created(){
    this.fetchFeeds();
},
methods:{
    fetchFeeds(page_url){
        let vm = this;
        page_url= page_url ||'feeds/api'
        fetch(page_url)
        .then(res => res.json())
        .then(res =>{
            vm.feeds = res.data;
            console.log(vm.feeds);            
        })
        .catch(err => console.log(err));
    }
  }
}

Answer 1

Это может быть проблема реактивности. Попробуйте использовать Object.assign , как показано ниже

 fetchFeeds(page_url){
    let vm = this;
    page_url= page_url ||'feeds/api'
    fetch(page_url)
    .then(res => res.json())
    .then(res =>{

        vm.feeds =  Object.assign({}, res.data);
        console.log(vm.feeds);            
    })
    .catch(err => console.log(err));
}

}