Estou trabalhando em um aplicativo simples de timer. Estou recebendo 3 dados do servidor: temporizadores, projetos e usuários. Acredito que estou repetindo os timers corretamente, mas não tenho certeza se devo transmitir dados dessa maneira. Quero que partes diferentes do meu aplicativo usem o mesmo conjunto de dados para usuários e projetos, caso um nome de projeto seja alterado, por exemplo. Aqui está o código até agora com perguntas incorporadas. Por enquanto, gostaria de fazer uma chamada única para todos os dados.

<script>
Vue.component('sidebar-timer', {
    props:  ['timer','projects','users'],
    computed: {

        /***** SHOULD PROJECT AND USER BE SET A DIFFERENT WAY? *****/
        project: function () {
            return this.projects[this.timer.project_id.toString()];
        },
        user: function () {
            return this.users[this.timer.user_id.toString()];
        }
    },

    template: '<li class="project-item"><div class="timer-proj-name"> @{{ project.name }}</div><div class="timer-name"> @{{ user.name }}</div> <button class="timer-start-btn">Start</button><div class="timer-duration">@{{ timer.duration }}</div><div class="timer-status">@{{ timer.status }}</div><div id="toggle-timer-notes"><div class="timer-task"> @{{ timer.notes }}</div><div>timer id: @{{ timer.id }}<input :value="timer.id"></li></div>',
})

var TimerSidebar = Vue.extend({
    methods: {
        updateData: function () { // GET DATA FROM THE SERVER
            var self = this;
            $.get('/timers/getJson', function(response){
                var userObj = response.users;
                var projectObj = response.projects;
                var timerObj = response.timers;
                var timerArr = Object.keys(timerObj).map(function (key) {return timerObj[key]; });

/***** IS THERE A WAY TO SET projects AND users AT A LEVEL OUTSIDE OF TimerSidebar? *****/
                self.$set(self, 'users', userObj);
                self.$set(self, 'projects', projectObj);
                self.$set(self, 'timers', timerArr);
            })
        }
    }
})
var timerSidebar = new TimerSidebar({
    el: '#timer-sidebar',
    data: {
           timers: [],
           projects: [],
           users: []
    },
})
methods: {

/***** HOW TO ONCLICK CALL updateTimers FROM OUTSIDE THE COMPONENT? *****/
        updateTimers: function(){ // ADD TIME RECORD FROM CLICK EVENT
            var newTimers = this.timers;
            newTimers.push({id: 166, project_id: 123, user_id: 1});
            newTimers.sort(function(timer1, timer2){
               if(timer1.id > timer2.id){
                   return 1;
               } else if(timer1.id < timer2.id){
                   return -1;
               } else {
                   return 0;
               }
            });
            this.timers = newTimers;
        }
    }