Vue.js: How to pass in data that isn't a paren

Question

I'm working on a simple timer app. I'm getting 3 pieces of data from the server: timers, projects and users. I believe I'm looping through timers correctly, but I'm not sure if I should be passing in data this way. I want different parts of my app to use the same dataset for users and projects in case a project name changes for example. Here's the code so far with questions embedded. I would like to do a single call for now for all the data at once.

<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;
        }
    }

Answer 1

This is the standard case when you should be going for a centralised state management. As you have data which is going to be used by multiple components, If the data flow is just limited to one way: parent to child, it can be manageable, but as soon as you get the requirement of updating the parent data when child changes it, or worse, updating the sibling data when another sibling changes it, it becomes messy.

Vue provides it own Flux like implementation, but the general practice is to go with vuex. With this, you store all your projects/users etc in vuex state, and each component can read/update from the central state. If its changed by one component, updated version is available to all components reactively. You can initiate the data in one place using actions in vuex itself.

Following is the architecture diagram:

You can have a look at my answer here on similar question and have a look at example on how to call api and save data in store.