Vue

HTML

<div id="app"></div>

CSS

body {
  background: #FFF;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

Vue.component('selected-item', {
  props: ['item'], 
  methods: {
    setToNull(){
      this.$emit('setToNull');
    }
  },
  template: `<span>
               <div class="button round btn-app-class selected-btn" @click="setToNull()">{{item.name}}</div>
             </span>   
            `
})

var vm = new Vue({
  el:'#app',
  template:`
      <div>
        <div v-if="selectedApp">
           <selected-item @setToNull="selectedApp = null" :item="selectedApp"></selected-item>
        </div>
        <div v-else>
          no app selected
        </div>
      </div>
   `,
    data(){
      return {
        selectedApp: {id: 1, name: 'here is my name'}
      }
    },
    mounted(){
    }
})