<p dir="auto">Hi,</p>
<p dir="auto">I am using <a href="http://visjs.org/docs/network" rel="nofollow">Vis Network</a> with <a href="https://vuejs.org" rel="nofollow">Vue.js</a> and I created two very simple applications, but none of them is working properly.</p>
<h2 dir="auto">1) The first app is here: <a href="https://jsfiddle.net/Filip_Z/9k2s3dgj/4/" rel="nofollow">https://jsfiddle.net/Filip_Z/9k2s3dgj/4/</a></h2>
<p dir="auto">The problem is that it cannot delete only the first node (with id=0). All of the other nodes can be deleted.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/18264428/21583988/1895b128-d097-11e6-8bab-f572e05a0105.png"><img src="https://cloud.githubusercontent.com/assets/18264428/21583988/1895b128-d097-11e6-8bab-f572e05a0105.png" alt="vis vue - deletenode - jsfiddle - mozilla firefox 2017-01-02 02 54 46" style="max-width: 100%;"></a></p>
<p dir="auto">In the browser console there are no errors.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    Vue.component('ovs-network', {
        template: &quot;#mytmp&quot;,
        data() {
            return {
                network: null,
                nodes: [
                    { id: 0, label: '0' },
                    { id: 1, label: '1' },
                    { id: 2, label: '2' },
                    { id: 3, label: '3' },
                    { id: 4, label: '4' }
                ],
                edges: [],
                options: {
                    manipulation: {
                        enabled: true,
                        initiallyActive: true,
                        deleteNode: function (deleteData, callback) {
                            callback(deleteData)
                        }
                    }
                },
                container: ''
            }
        },

        mounted() {
            this.container = document.getElementById('mynetwork');
            var data = {
                nodes: this.nodes,
                edges: this.edges
            };
            this.network = new vis.Network(this.container, data, this.options);
        }
    });


    const app = new Vue({
        el: '#app'
    });"><pre class="notranslate"><code class="notranslate">    Vue.component('ovs-network', {
        template: "#mytmp",
        data() {
            return {
                network: null,
                nodes: [
                    { id: 0, label: '0' },
                    { id: 1, label: '1' },
                    { id: 2, label: '2' },
                    { id: 3, label: '3' },
                    { id: 4, label: '4' }
                ],
                edges: [],
                options: {
                    manipulation: {
                        enabled: true,
                        initiallyActive: true,
                        deleteNode: function (deleteData, callback) {
                            callback(deleteData)
                        }
                    }
                },
                container: ''
            }
        },

        mounted() {
            this.container = document.getElementById('mynetwork');
            var data = {
                nodes: this.nodes,
                edges: this.edges
            };
            this.network = new vis.Network(this.container, data, this.options);
        }
    });


    const app = new Vue({
        el: '#app'
    });
</code></pre></div>
<h2 dir="auto">2) The second app is here: <a href="https://jsfiddle.net/Filip_Z/3ead4r51/1/" rel="nofollow">https://jsfiddle.net/Filip_Z/3ead4r51/1/</a></h2>
<p dir="auto">The problem is that after applying the <code class="notranslate">setData</code> method, wrong labels are displayed. As you can see in the example, when you click on the button - this Vue method will be executed:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="                updateData() {
                    var nodes = [
                        { id: 0, label: '0' },
                        { id: 1, label: '1' },
                        { id: 4, label: '4' }
                    ];

                    this.network.setData({ nodes: nodes, edges: []});
                    console.log('Updated!');
                    this.disabled = true;
                }"><pre class="notranslate"><code class="notranslate">                updateData() {
                    var nodes = [
                        { id: 0, label: '0' },
                        { id: 1, label: '1' },
                        { id: 4, label: '4' }
                    ];

                    this.network.setData({ nodes: nodes, edges: []});
                    console.log('Updated!');
                    this.disabled = true;
                }
</code></pre></div>
<p dir="auto">So there will be three nodes but, for some reason, all these nodes will have the same label: '4'.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/18264428/21584009/b0ef528a-d097-11e6-95ad-896ad1fdad56.png"><img src="https://cloud.githubusercontent.com/assets/18264428/21584009/b0ef528a-d097-11e6-95ad-896ad1fdad56.png" alt="vis vue - dataset - jsfiddle - mozilla firefox 2017-01-02 02 58 55" style="max-width: 100%;"></a></p>
<p dir="auto">In the browser console there are no errors.</p>
<p dir="auto">Now, I'm not sure where the problem is (Vue or Vis).</p>
<p dir="auto">Hi,</p>
<p dir="auto">In which case Vis changes the color of nodes to red?</p>
<p dir="auto">I have created a very simple app using <a href="https://vuejs.org/" rel="nofollow">Vue.js</a> &amp; <a href="http://visjs.org/docs/network/" rel="nofollow">Vis Network</a>. You can take a look at it here: <strong><a href="https://jsfiddle.net/Filip_Z/2ewtzh7w/1/" rel="nofollow">https://jsfiddle.net/Filip_Z/2ewtzh7w/1/</a></strong><br>
For some reason, when I add a new edge - all nodes become red and every newly added edge will overlap with the existing one:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/18264428/21869848/d2f0b3fa-d859-11e6-95af-1766e72f7041.png"><img src="https://cloud.githubusercontent.com/assets/18264428/21869848/d2f0b3fa-d859-11e6-95af-1766e72f7041.png" alt="1" style="max-width: 100%;"></a></p>
<p dir="auto">Now, here is the same version of this app without Vue: <a href="https://jsfiddle.net/Filip_Z/63jcj26y/2/" rel="nofollow">https://jsfiddle.net/Filip_Z/63jcj26y/2/</a></p>
<p dir="auto">... and there is no this problem. But, the problem for me is that there are no errors in the browser console and I cannot figure out why is this happening. Do you know in what case Vis changes the color of nodes to red (and every newly added edge will overlap with the existing ones), <strong>in which cases Vis behaves like that?</strong> I'm asking because I don't know how to debug/solve this, I have no idea what is causing this behavior.</p>