title: Vue router: multiple router-views having to change only the content of one
body: <p>I have a left menu and two different content areas on the right:</p>
  
  <pre><code>&lt;main-menu&gt;&lt;/main-menu&gt;
  &lt;router-view name="area_1" /&gt;
  &lt;router-view name="area_2" /&gt;
  </code></pre>
  
  <p>The links in menu component are build from routes like this</p>
  
  <pre><code>&lt;span v-for="route in this.$router.options.routes"&gt;
   &lt;router-link :to="route.path" class="teal item"&gt;
    {{route.name}}
   &lt;/router-link&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>The routes are like this </p>
  
  <pre><code>routes: [
            {
              path: '/c0',
              name: 'C0',
              components: { area_1: C0 }
            },
            {
              path: '/c1',
              name: 'C1',
              components: { area_1: C1 }
            },
            {
              path: '/c2',
              name: 'C2',
              components: { area_2: C2 }
  </code></pre>
  
  <p>I would like to click on C2 router-link and change only the content of area_2, but area_1 is emptyed while I would like to keep its current content (C0 <strong>or</strong> C1).</p>
  
  <p>Ho can I achieve this?
  Thanks in advance</p>