title: Vue.js: Including same instance of component multiple times in page
body: <p>What I am trying to accomplish:
  I have some filters that display on a page to filter the products that display on the page. In mobile, I want to hide these filters behind a button that, once pressed, will show the filters in a slide out menu from the side.</p>
  
  <p>While I can duplicate the same components on the page twice, the components are not the exact same instance, that is, clicking on a filter will trigger that function to filter the products on the page, but it sets its own data attributes, which I am using to say "if data attribute 'selected' is true, add a 'selected' class to the component. When I resize the window, the other instance of the component does not have the 'selected' data attribute marked as 'true'.</p>
  
  <p>I expect this, because, from the docs:</p>
  
  <blockquote>
    <p>Notice that when clicking on the buttons, each one maintains its own, separate count. That’s because each time you use a component, a new instance of it is created.</p>
  </blockquote>
  
  <p>...but what would be the best way to do this?</p>
  
  <p>I played around with the idea of just setting a class 'mobile' on the component, and the .mobile css would style the components differently, but I need for it to break out where it is nested.</p>
  
  <p>e.g.</p>
  
  <pre><code>&lt;body&gt;
     &lt;header&gt;
        &lt;!-- desktop --&gt;
        &lt;guitar-filters&gt;
     &lt;header&gt;
  
     &lt;!-- mobile --&gt;
     &lt;guitar-filters&gt;
  &lt;/body
  </code></pre>
  
  <p>Here is my Vue component 'guitar-filters' that displays several components called 'instrument-filter':</p>
  
  <pre><code>Vue.component('guitar-filters', {
  
      data: function() {
  
          return {
              isMobile: false
          }
  
      },
  
      mounted: function() {
  
          var comp = this;
          this.setIsMobile();
  
          window.addEventListener('resize', function() {
              comp.setIsMobile();
          });
  
      },
  
      methods: {
  
          setIsMobile: function() {
  
              this.isMobile = (window.innerWidth &lt;= 900) ? true : false;
  
          }
  
      },
  
      template: `
          &lt;ul class="filters" :class="{mobile: isMobile}"&gt;
  
          &lt;li&gt;
              All
          &lt;/il&gt;
  
          &lt;li&gt;
              Series
              &lt;ul&gt;
                  &lt;instrument-filter filter-by="series" filter="All"&gt;All&lt;/instrument-filter&gt;
                  &lt;instrument-filter filter-by="series" filter="Frontier"&gt;Frontier&lt;/instrument-filter&gt;
                  &lt;instrument-filter filter-by="series" filter="Legacy"&gt;Legacy&lt;/instrument-filter&gt;
                  &lt;instrument-filter filter-by="series" filter="USA"&gt;USA&lt;/instrument-filter&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
  
          &lt;li&gt;
              Body Shape
              &lt;ul&gt;
                  &lt;instrument-filter filter-by="bodyType" filter="All"&gt;All&lt;/instrument-filter&gt;
                  &lt;instrument-filter filter-by="bodyType" filter="Concert"&gt;Concert&lt;/instrument-filter&gt;
                  &lt;instrument-filter filter-by="bodyType" filter="Concertina"&gt;Concertina&lt;/instrument-filter&gt;
                  &lt;instrument-filter filter-by="bodyType" filter="Concerto"&gt;Concerto&lt;/instrument-filter&gt;
                  &lt;instrument-filter filter-by="bodyType" filter="Orchestra"&gt;Orchestra&lt;/instrument-filter&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
  
      &lt;/ul&gt;
      `
  
  });
  </code></pre>
  
  <p>The instrument-filter component:</p>
  
  <pre><code>Vue.component('instrument-filter', {
  
      data: function() {
  
          return {
              selected: false
          }
  
      },
  
      props : [
          'filterBy',
          'filter'
  
      ],
  
      methods: {
  
          addFilter: function() {
              this.$root.$emit('addFilter',{filterBy: this.filterBy,filter: this.filter});
          },
  
          clearFilter: function() {
              this.$root.$emit('clearFilter',{filterBy: this.filterBy,filter: this.filter});
          }
  
      },
  
      template: `
          &lt;li :class="{ 'selected' : selected }" @click="selected = !selected; selected ? addFilter() : clearFilter()"&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/li&gt;
      `
  
  });
  </code></pre>
  
  <p>.css:</p>
  
  <pre><code>ul.filters &gt; li &gt; ul &gt; li.selected::before {
     content: "✔️";
     ...
  }
  </code></pre>
  
  <p>The goal is to have a filter have the 'selected' class in both instances. If I click on 'concert' body shape, and then resize the window to mobile breakpoint, the other instance of that filter component will be selected also.</p>
  
  <p>EDIT: I could hack this. I could move one instance of the component with javascript, but I'm learning Vue, and want to do this the Vue way and best practices.</p>