title: How to update a slot in Vue.JS
body: <p>I have a Vue component simplified below.</p>
  
  <p>Here is the template</p>
  
  <pre><code>&lt;template&gt;
      &lt;slot&gt;&lt;/slot&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>The slot may contain HTML, which is why I decided to use a slot rather than a prop which I would simply bind to. I'd like to keep it that way.</p>
  
  <p>I have a method that gets new HTML from the server. I'd like to use this new HTML to update the slot. I'm not sure if slots are reactive and how I can accomplish this.</p>
  
  <p>I can view the default slot using <code>this.$slots.default[0]</code>, but I don't know how to update it with a string of HTML content. Simply assigning the string to the element is obviously incorrect, to <code>.innerHtml</code> does not work because it isn't an available function, and to <code>.text</code> doesn't work. I assume that even though the text element exists on the slot object, the element properties take precedence.</p>
  
  <p>Per suggestion in comments, I've tried this along with a computer property.</p>
  
  <pre><code>&lt;span v-html="messageContent"&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/span&gt;
  </code></pre>
  
  <p>But now the problem is that it overwrites the slot passed to me.</p>
  
  <p><strong>How can I reactively update a slot with new HTML in Vue.JS?</strong></p>