<h3 dir="auto">Version</h3>
<p dir="auto">2.6.10</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://github.com/gr8den/vue-select-memory-leak/blob/master/vue-select-memory-leak.html">https://github.com/gr8den/vue-select-memory-leak/blob/master/vue-select-memory-leak.html</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li>Open vue-select-memory-leak.html from repo (I use Google Chrome 74.0.3729.157)</li>
<li>Open Chrome DevTools on this page</li>
<li>Go to page Performance, enable Memory checkbox</li>
<li>Start Record, click Collect garbage</li>
<li>Click Toggle button multiple times (I clicking 50 seconds, multiple times in second)</li>
<li>Click Collect garbage, click Stop record</li>
<li>See nodes leak on Memory chart - count of nodes not decreased after Collecting garbage (in my case nodes increased from 50 to ~2500)</li>
</ol>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">No memory leak - Count of nodes must be decrease after force collect garbage</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Have memory leak (DOM)</p>
<hr>
<p dir="auto">I try replace "select" element to "input" element and after it DOM nodes cleaned right (no leak). Also I try add 10000 options to select, browser still not clean nodes, but use a lot of RAM</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.6.14</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="http://CannotProvide-SeeNotes.cant" rel="nofollow">http://CannotProvide-SeeNotes.cant</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Set up a new component.</p>
<p dir="auto">Create the template, include at least one element that has the class attribute as well as a v-bind for class.</p>
<p dir="auto">The bound classes should come from a locally declared variable, that variable must be set during created() (In this instance the classes come from an API).</p>
<p dir="auto">Use the newly created component twice on the page. In this instance its a wrapper component for child components. all matching components of the same name will have the classes duplicated as many times as they exist on the page.</p>
<p dir="auto">Expected results, class="" should contain the initial class(es) and the bound ones.<br>
Actual results, class="" contains the initial class(es) and the bound class(es) duplicated.</p>
<p dir="auto">My component (there is wider logic in use but the important bit is to bind classes and reuse the component multiple times):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;template&gt;
    &lt;div class=&quot;row m-0&quot; :class=&quot;classes&quot;&gt;
        &lt;component v-bind:props=&quot;pageComponent.props&quot; :componentData=&quot;pageComponent&quot; :components=&quot;pageComponent.components&quot; :class=&quot;pageComponent.classes&quot; :is=&quot;pageComponent.name&quot; :fixedWidth=&quot;pageComponent.fixedWidth&quot; v-for=&quot;(pageComponent, index) in pageComponents&quot; :key=&quot;index&quot;&gt;&lt;/component&gt;
    &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;

    function initialState (){
        return {
            pageComponents: '',
            classes: '',
        }
    }

    export default {
        name: 'RowWrapper',
        props : [
            'props',
            'components',
            'componentData'
        ],
        data: function () {
            return initialState();
        },
        watch: {
            $route (to, from){
                this.resetWindow();
            },
            components (to, from){
                this.pageComponents = to;
            }
        },
        methods: {
            getComponents() {
                this.pageComponents = this.components;
            },
            resetWindow: function (){
                Object.assign(this.$data, initialState());
            },
        },
        created(){
            this.getComponents();
          if(this.componentData){
            this.classes = this.componentData.classes;
          }
        }
    };
&lt;/script&gt;
&lt;style lang=&quot;scss&quot;&gt;
&lt;/style&gt;"><pre class="notranslate"><code class="notranslate">&lt;template&gt;
    &lt;div class="row m-0" :class="classes"&gt;
        &lt;component v-bind:props="pageComponent.props" :componentData="pageComponent" :components="pageComponent.components" :class="pageComponent.classes" :is="pageComponent.name" :fixedWidth="pageComponent.fixedWidth" v-for="(pageComponent, index) in pageComponents" :key="index"&gt;&lt;/component&gt;
    &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;

    function initialState (){
        return {
            pageComponents: '',
            classes: '',
        }
    }

    export default {
        name: 'RowWrapper',
        props : [
            'props',
            'components',
            'componentData'
        ],
        data: function () {
            return initialState();
        },
        watch: {
            $route (to, from){
                this.resetWindow();
            },
            components (to, from){
                this.pageComponents = to;
            }
        },
        methods: {
            getComponents() {
                this.pageComponents = this.components;
            },
            resetWindow: function (){
                Object.assign(this.$data, initialState());
            },
        },
        created(){
            this.getComponents();
          if(this.componentData){
            this.classes = this.componentData.classes;
          }
        }
    };
&lt;/script&gt;
&lt;style lang="scss"&gt;
&lt;/style&gt;
</code></pre></div>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">Bound classes to be merged with class attribute correctly for each component. Instead they are duplicated for as many instances of the same component that exist on the page.</p>
<p dir="auto">should be:</p>
<p dir="auto">class="row m-0 col-md-6 col-sm-12"</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">class is in fact set to the following when 2 of the same components exist.</p>
<p dir="auto">class="row m-0 col-md-6 col-sm-12 col-md-6 col-sm-12"</p>
<hr>
<p dir="auto">None of the code testing areas seem to allow me to declare multiple components for testing, so none provided.</p>
<p dir="auto">I have seen a few of these posted where classes are appended, however I believe that in this instance this is a real world situation where VueJS is acting incorrectly.</p>