title: Vue.js : "TypeError: Cannot set property props of #<Object> which has only a getter"
body: <p>I am trying to instanciate a Vue component and I am getting the error :</p>
  
  <pre><code>[Vue warn]: Error in render: "TypeError: Cannot set property props of 
  #&lt;Object&gt; which has only a getter"
  (found in &lt;Root&gt;)
  </code></pre>
  
  <p>I am also using the library vuedraggable but I presume that the problem is more a Vue problem than a vuedraggable one. Below is my code.</p>
  
  <p>Here is draggable-list.vue</p>
  
  <pre><code>&lt;template src="./draggable-list-component.html"&gt;&lt;/template&gt;
  &lt;script src="./draggable-list.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>draggable-list.js</p>
  
  <pre><code>const draggable = require("vuedraggable");
  
  module.exports = {
    name: "draggable-list",
    components: {
      draggable
    },
  
    // properties which has been passed from the parent vue to the component
    props: ["title", "elements"],
  
    data() {
      return {
        isDragging: false,
      };
    },
  
    methods: {
      test() {
        console.log("blou");
      }
    }
  };
  </code></pre>
  
  <p>draggable-list-component.html : </p>
  
  <pre><code>&lt;div id="draggable-list"&gt;
    &lt;draggable element="ul"
               :list="elements"&gt;
      &lt;!-- TODO --&gt;
    &lt;/draggable&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My main.js calls then another js file :</p>
  
  <pre><code>require("./components/manager");
  </code></pre>
  
  <p>In the manager I instanciate my Vue instance : </p>
  
  <pre><code>const Vue = require("vue/dist/vue.common");
  const draggableList = require("./draggable-list.vue");
  
  let triggerLibrary;
  
  triggerLibrary = new Vue({
    el: "#draggable-list",
    template: "&lt;draggableList :title='title' :elements='triggerElements' 
  /&gt;",
    components: {draggableList},
  
    data: {
     title: "Trigger library",
      triggerElements: [{name:"Trigger name", description:"Quick trigger 
  description"}]
    }
  });
  </code></pre>
  
  <p>And I am using it in my index.html like this : </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
      &lt;title&gt;planner&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div id="draggable-list"&gt;
      &lt;draggable-list&gt;&lt;/draggable-list&gt;
    &lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Does anyone see what's wrong here?</p>