[Vuejs]-Vue.js 2.0: Component not rendering object change

new Vue({
  el: '#app',
  data: {
    userList: {
      users: [{
          portrait: 'https://via.placeholder.com/50?text=p1',
          localized_name: 'one'
        },
        {
          portrait: 'https://via.placeholder.com/50?text=p2',
          localized_name: 'two'
        },
        {
          portrait: 'https://via.placeholder.com/50?text=p3',
          localized_name: 'three'
        },
        {
          portrait: 'https://via.placeholder.com/50?text=p4',
          localized_name: 'four'
        },
        {
          portrait: 'https://via.placeholder.com/50?text=p5',
          localized_name: 'five'
        },
      ]
    },
    userSelected: {
      "name": '',
      "portrait": '',
    },
    searching: false,
    query: ''
  },
  computed: {
    selectedUserPortrait() {
      return this.query ?
        this.userList.users.filter((u) =>
          u.localized_name.toLowerCase().includes(this.query.toLowerCase())
        ).map((u) => u.portrait) : [];
    }
  },
  methods: {
    loadUser: function(user) {
      this.userSelected = user;
      return;
    },
    dimUsers: function() {
      this.searching = true
      return;
    },
    undimUsers: function() {
      this.searching = false;
      this.query = '';
    }
  }
});

.selectedUser {
  border: solid 2px red;
}

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <input type="text" v-model="query" placeholder="Search for a user" @focus="dimUsers()" @blur="undimUsers()">
  <ul>
    <li v-for="user in userList.users" :key="user.localized_name">
      <img v-bind:src="user.portrait" class="userPortrait" :class="{'selectedUser': selectedUserPortrait.includes(user.portrait), 'dimmed': searching}" @click="loadUser(user)">
    </li>
  </ul>
  <div>{{userSelected.localized_name}}</div>
</div>