title: Vue components not being given unique id
body: <p>I have a single page app to display sensor information from around the house.  I have a component that renders a gauge which uses the highcharts library.  There are different numbers of gauges for different rooms depending on the information being displayed.  I have the options for displaying gauges (max, min, formatting, etc) stored in a vuex state array.  The rooms are all different routes within my app with their own link in the navbar.</p>
  <p>If I click on the first room (say office) then three gauges are rendered - all good.  However, if I now click on garage (which only has one gauge) then the options for the first gauge are not changed from the previous display in office.  It is as if the component is held in memory and its settings are not updated.</p>
  <p>Here is my code to help my explanation, first the gauge component:</p>
  <pre><code>&lt;template&gt;
      &lt;div :ref=&quot;'gauge-'+_uid&quot; class=&quot;border gauge-container&quot;&gt;&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  module.exports = {
      props: {
          'gValue': {type: Number, default: 20},
          'gMin': {type: Number, default: 0},
          'gMax': {type: Number, default: 100},
          'gUnits': {type: String, default: &quot;&quot;},
      },
      data: function () {
          return {
              // Data for chart
              chart: null,
              gaugeOptions: {
                  chart: {
                      type: 'solidgauge'
                  },
                  title: null,
                  pane: {
                      size: 200,
                      center: ['50%', '75%'],
                      startAngle: -90,
                      endAngle: 90,
                      background: {
                          backgroundColor:
                              Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
                          innerRadius: '60%',
                          outerRadius: '100%',
                          shape: 'arc'
                      }
                  },
                  tooltip: {
                      enabled: false
                  },
                  // the value axis
                  yAxis: {
                      stops: [
                          [0.1, '#55BF3B'], // green
                          [0.5, '#DDDF0D'], // yellow
                          [0.9, '#DF5353'] // red
                      ],
                      lineWidth: 0,
                      tickWidth: 0,
                      minorTickInterval: null,
                      tickAmount: 0,
                      title: {
                          y: -70
                      },
                      labels: {
                          y: 16
                      },
                      min: this.gMin,
                      max: this.gMax,
                      title: null,
                  },
                  plotOptions: {
                      solidgauge: {
                          dataLabels: {
                              y: 5,
                              borderWidth: 0,
                              useHTML: true
                          }
                      }
                  },
                  credits: {
                      enabled: false
                  },
                  series: [{
                      data: [this.gValue],
                      dataLabels: {
                      format:
                          '&lt;div style=&quot;text-align:center&quot;&gt;' +
                          '&lt;span style=&quot;font-size:14px&quot;&gt;{y} ' + this.gUnits + '&lt;/span&gt;' +
                          '&lt;/div&gt;'
                      },
                  }],
              }
          }
      },
      mounted: function () {
          console.log(this._uid) // Look at the id that is generated -- this is not being updated!
          Highcharts.setOptions(
              {
                  chart: {
                      style: {
                          fontFamily: 'roboto'
                      }
                  }
              }
          )
          this.chart = Highcharts.chart(
              this.$refs['gauge-' + this._uid], 
              this.gaugeOptions
          )
      },
      watch: {
          gValue: function (val) {
              this.chart.series[0].points[0].update(val)
          },
      }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .gauge-container {
      max-width: 250px;
      height: 180px;
  }
  &lt;/style&gt;
  </code></pre>
  <p>I have put a console.log in there to check the id - I think this is where the problem arises.  It only gets updated when I go from a page with one gauge to three (it adds another two ids).  Is there are way to destroy the gauge component when I leave that part of the route?</p>
  <p>and now the parent component which calls the gauge component:</p>
  <pre><code>&lt;template&gt;
      &lt;div v-if=&quot;hasRooms&quot; id=&quot;room&quot;&gt;
          &lt;b-container&gt;
              &lt;h2&gt;{{ roomName }}&lt;/h2&gt;
              &lt;b-row align-h=&quot;center&quot;&gt;
                  &lt;b-col sm=&quot;3&quot; class=&quot;text-center p-0 ml-1 mr-1&quot;  v-for=&quot;device in deviceList&quot; v-bind:key=&quot;deviceList.name&quot;&gt;
                      &lt;p&gt;{{ device.name }} - {{ device.function }}&lt;/p&gt;
                      &lt;highchart v-if=&quot;device.format == 'default'&quot; :g-value=&quot;device.value&quot;&gt;
                          &lt;template v-slot:title&gt;
                              {{ device.function | capitalize }}
                          &lt;/template&gt;
                      &lt;/highchart&gt;
                      &lt;highchart v-else
                          v-bind:g-value=&quot;device.value&quot;
                          v-bind:g-min=&quot;device.format.min&quot;
                          v-bind:g-max=&quot;device.format.max&quot;
                          v-bind:g-units=&quot;device.format.units&quot;
                      &gt;
                          &lt;template v-slot:title&gt;
                              {{ device.function | capitalize }}
                          &lt;/template&gt;
                      &lt;/highchart&gt;
                  &lt;/b-col&gt;
              &lt;/b-row&gt;
          &lt;/b-container&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  module.exports = {
      name: 'room',
  
      /** Load external component files
       *  Make sure there is no leading / in the name
       *  To load from the common folder use like: 'common/component-name.vue' */
      components: {
          'highchart': httpVueLoader('components/HighCharts.vue'),
      }, // --- End of components --- //
      
      data() {
          return {
  
          };
      },
      computed: {
          hasRooms() {
              return this.$store.getters['rooms/nRooms'] &gt; 0;
          },
          roomName() {
              return this.$store.getters['rooms/getRoomById'](this.$route.params.roomId);
          },
          deviceList() {
              return this.$store.getters['rooms/getDevicesinRoom'](this.$route.params.roomId);
          },
      },
      filters: {
          capitalize: function (value) {
              if (!value) return ''
              value = value.toString()
              return value.charAt(0).toUpperCase() + value.slice(1)
          },
          tonumber: function (value){
              if (!value) return ''
              return parseFloat(value)
          }
      },
  }
  &lt;/script&gt;
  </code></pre>
  <p>The rooms are generated by the router and rendered from:</p>
  <pre><code>&lt;template&gt;
      &lt;div id=&quot;rooms&quot;&gt;
          &lt;b-alert variant=&quot;info&quot; :show=&quot;!hasRooms&quot;&gt;
              &lt;p&gt;
                  There are no rooms available yet. Pass a message that defines a room id and device id 
                  to the uibuilder node first. See &lt;router-link :to=&quot;{name: 'usage_info'}&quot;&gt;the setup information&lt;/router-link&gt; 
                  for instructions on how start using the interface.
              &lt;/p&gt;
          &lt;/b-alert&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  module.exports = {
      name: 'RoomsOverview',
      data() {
          return {
  
          };
      },
      computed: {
          hasRooms() {
              return this.$store.getters['rooms/nRooms'] &gt; 0;
          },
          roomList() {
              return this.$store.getters['rooms/getAllRooms'];
          },
      },
  }
  &lt;/script&gt;
  </code></pre>