title: vue-carousel goToPage to programmatically change to selected page
body: <p>I'm passing a collection of locations into vue-carousel. I'm using the same collection in a couple of other places on the page, emitting the selected location to the root, which is where the locations and selected location are stored, in an eventHub. </p>
  
  <p>The tricky part was getting the carousel to move to the right page - I'm showing three locations at a time in larger viewports and just one on smaller, using the perPageCustom option. I create keys in the api in laravel and based on the size of the window, I'm moving to the right page and it all works, but when it loads I get an error because the ref doesn't exist when the watcher first fires off. I know that's the issue, but I'm not sure how to have a watcher for when the location changes, that doesn't watch when the page loads... perhaps using the mount?</p>
  
  <p>My component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h3&gt;Locations ({{locations.length}})&lt;/h3&gt;
          &lt;p class="lead"&gt;Serving California in the greater Sacramento and Los Angeles areas.&lt;/p&gt;
          &lt;carousel v-if="locations.length &gt; 0" ref="locations-carousel" :scrollPerPage="true" :perPage="1" :perPageCustom="[[480, 1], [768, 3]]" v-on:pageChange="pageChange"&gt;
            &lt;slide v-for="loc in locations" :key="loc.id"&gt;
              &lt;div class="card" style="width: 18rem;" v-bind:class="{ closest: loc.is_closest,  active: loc.id == location.id }"&gt;
                &lt;img v-on:click="changeLocation(loc.id)" v-if="loc.is_comingsoon === 0" class="card-img-top" :src="'/assets/images/location_'+loc.pathname+'.jpg'" alt="Card image cap"&gt;
                &lt;img v-on:click="changeLocation(loc.id)" v-if="loc.is_comingsoon === 1" class="card-img-top" :src="'/assets/images/coming-soon.png'" alt="Card image cap"&gt;
                &lt;div class="card-body"&gt;
                  &lt;h5 class="card-title" v-on:click="changeLocation(loc.id)"&gt;{{ loc.name }}&lt;/h5&gt;
                  &lt;p class="card-text"&gt;{{ loc.address }}&lt;br&gt;{{ loc.city_name }}&lt;br&gt;{{ loc.phone | phone }}&lt;/p&gt;
                  &lt;div class="btn-group" role="group" aria-label="Location Buttons"&gt;
                    &lt;a class="btn btn-outline btn-default" :href="'tel:'+ loc.phone"&gt;&lt;font-awesome-icon icon="phone"&gt;&lt;/font-awesome-icon&gt; call&lt;/a&gt;
                    &lt;a class="btn btn-outline btn-default" :href="loc.map"&gt;&lt;font-awesome-icon icon="globe"&gt;&lt;/font-awesome-icon&gt; map&lt;/a&gt;
                    &lt;a class="btn btn-outline btn-default" v-on:click="changeLocation(loc)" v-bind:class="{ active: loc.id == location.id }"&gt;&lt;font-awesome-icon icon="star"&gt;&lt;/font-awesome-icon&gt; pick&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;p class="card-text"&gt;{{ loc.note }}&lt;/p&gt;
                  &lt;span class="badge badge-closest" v-if="loc.is_closest"&gt;&lt;font-awesome-icon icon="map-marker"&gt;&lt;/font-awesome-icon&gt; closest detected&lt;/span&gt;
                  &lt;span class="badge badge-active" v-if="loc.id == location.id"&gt;&lt;font-awesome-icon icon="star"&gt;&lt;/font-awesome-icon&gt; selected &lt;font-awesome-icon icon="angle-double-down" :style="{ color: 'white' }"&gt;&lt;/font-awesome-icon&gt;&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/slide&gt;
          &lt;/carousel&gt;
          &lt;font-awesome-icon icon="spinner" size="lg" v-if="locations.length &lt; 1"&gt;&lt;/font-awesome-icon&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      Vue.filter('phone', function (phone) {
          return phone.replace(/[^0-9]/g, '')
                      .replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
      });
      import { Carousel, Slide } from 'vue-carousel';
      var axios = require("axios");
      export default {
          name: 'locations-carousel',
          props: ['location', 'pg', 'locations'],
          components: {
              Carousel,
              Slide
          },
          data() {
              return {
                  debounce: null,
                  subs: {},
                  clear: 0
              };
          },
          watch: { 
              location: function(newVal, oldVal) { // watch it
                  console.log('Prop changed: ', newVal, ' | was: ', oldVal)
                  console.log('key: '+this.location.key);
                  if( window.innerWidth &gt; 481 ) {
                      if( this.location.pg == 1 ) {
                          this.$refs['locations-carousel'].goToPage(-0);
                      } else {
                          this.$refs['locations-carousel'].goToPage(1);
                      }   
                  } else {
                      this.$refs['locations-carousel'].goToPage(this.location.key);
                  }
              }
          },
          methods: {
              pageChange(i){ 
                  console.log('current Index', i); 
              },
              changeLocation(location) {
                  this.$eventHub.$emit('location-loaded', location);              
              }
          }
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The error I'm getting:</p>
  
  <pre><code>[Vue warn]: Error in callback for watcher "location": "TypeError: 
  Cannot read property 'goToPage' of undefined"
  
  found in
  
  ---&gt; &lt;LocationsCarousel&gt; at resources/assets/js/components/LocationsCarousel.vue
     &lt;Root&gt;
  
  TypeError: Cannot read property 'goToPage' of undefined
  at VueComponent.location (app.js?v=0.1:53288)
  at Watcher.run (app.js?v=0.1:3937)
  at flushSchedulerQueue (app.js?v=0.1:3685)
  at Array.&lt;anonymous&gt; (app.js?v=0.1:2541)
  at flushCallbacks (app.js?v=0.1:2462)
  </code></pre>