Vue change width and content

<div id='search' :style="{width: loggedIn ? '200px' : '400px'}"></div>
<div id="login" :style="{width: loggedIn ? '400px' : '200px'}">
  <div id='somecontent' v-if="loggedIn"></div>
  <div id='morecontent' v-if="loggedIn"></div>
  <img v-if="!loggedIn">
</div>

You can bind style in vuejs by using v-bind

new Vue({
  ...
  data: {
    loggedIn: false
  }
  ...
})

fiddle

create a default width inside your data with the default value, like:

data() {
        return {
            myWidth: '200'
        }
    },

everytime you login you should change the width value, and then you can do something like this:

<div :style="{ width: myWidth + 'px' }" id='search' width="400px"></div>

hope it helps!