title: Svelte: Replace nested component by changing binded variable
body: <p>I am writing <strong>Svelte</strong> project, where I have <strong>Message</strong> component which represents some js object. </p>
  
  <p>There is ability to edit this object. For this purpose I desided to use two nested component <strong>MessageEditable</strong> and <strong>MessageReadable</strong>.</p>
  
  <p>They should replace each other, depending on <strong>Message</strong> component state.</p>
  
  <p>The problem is that when I am trying to save result of editing and 
  change <strong>MessageEditable</strong> to <strong>MessageReadable</strong> by setting <strong>isEditing</strong> property to false I get error:</p>
  
  <p><a href="https://i.stack.imgur.com/Q7J6M.png" rel="nofollow noreferrer">image of error from console</a></p>
  
  <p>Did I make a mistake or this is normal behavior? Is binding a good approach or there is more optimal for exchanging of values with parent components?</p>
  
  <p>Message:</p>
  
  <pre><code>&lt;div class="message"&gt;
  
      {#if isEditing}
      &lt;MessageEditable bind:message bind:isEditing /&gt;
      {:else}
      &lt;MessageReadable {message}/&gt;
      {/if}
  
      &lt;div class="message__controllers"&gt;
          &lt;button on:click="set({isEditing: true})"&gt;Edit&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      import MessageEditable from './MessageEditable.html';
      import MessageReadable   from './MessageReadable.html';
  
      export default {
          components:{
              MessageEditable,
              MessageReadable,
          },
          data:() =&gt; ({
              message:{
                id: '0',
                text: 'Some message text.'
              },
              isEditing: false,
          }),
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>MessageEditable:</p>
  
  <pre><code>&lt;form  class="message-editable" on:submit&gt;
      &lt;label&gt;&lt;span &gt;text&lt;/span&gt;&lt;input  type="text"  bind:value=message.text required&gt;&lt;/label&gt;
      &lt;label&gt;&lt;span&gt;id&lt;/span&gt;&lt;input  type="text" bind:value=message.id required&gt;&lt;/label&gt;
      &lt;div&gt;&lt;button type="submit"&gt;Save&lt;/button&gt;&lt;/div&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
      export default {
          events:{
              submit(node){
                  node.addEventListener('submit', (event) =&gt; {
                     event.preventDefault();
  
                     this.set({isEditing: false});
                  });
              },
          },
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>MessageReadable:</p>
  
  <pre><code>&lt;div class="message-readable"&gt;
      &lt;p&gt;&lt;span&gt;text: &lt;/span&gt;{message.text}&lt;/p&gt;
      &lt;p&gt;&lt;span&gt;id: &lt;/span&gt;{message.id}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>