title: Vue change width and content
body: <p>I am using vuejs and depending on whether the user is logged in, I need to adjust the size and content of two divs inside my topbar. 
  So if they aren't logged in it should be like this:</p>
  
  <pre><code>&lt;div id='search' width="400px"&gt;&lt;/div&gt;&lt;div id="login" width="200px"&gt;&lt;img&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And when they're logged in it should be like this:</p>
  
  <pre><code>&lt;div id='search' width="200px"&gt;&lt;/div&gt;&lt;div id="login" width="400px"&gt;&lt;div id='somecontent&gt;&lt;/div&gt;&lt;div id='morecontent'&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I know i can achieve this by hardcoding both of them entirely and then using v-if statements but I was wondering if there was a better way.</p>