title: How can I change the whole data of a vue object?
body: <p>Simply, I just want to change the entire data of a Vue object, like this:     </p>
  
  <pre><code>vueobj.$data = newdata; 
  </code></pre>
  
  <p>but the official document says it's not allowed:</p>
  
  <blockquote>
    <p>VM156 vue.js:597 [Vue warn]: Avoid replacing instance root $data. Use
    nested data properties instead.</p>
    
    <p>(found in )</p>
  </blockquote>
  
  <p>So I tried another way: first destroy the the vueobj by <code>$destroy()</code>, then create a new vueobj to bind new data object to the same the UI element, but after that, the UI element still uses the old data. So how could I solve this problem? thanks!</p>