title: Vuejs rendering select dropdown based on first choice in first drop down
body: <p>I have two drop-down menus. Depending on the choice of the first drop-down the choices of the second need to be filtered and displayed. The first dropdown has a RoomID value that is used to filter an array of objects for the second drop-down menu. When I select a Room in the first dropdown the console log shows the correct data for the second dropdown. however, it is not rendering in the Html. I am not sure why this is not working</p>
  
  <p>Html:</p>
  
  <pre><code>            &lt;div id="reports-menu" class="myTextColor1 pl-10"&gt;
                 &lt;div class="row"&gt;
                    &lt;div class="input-field col s12"&gt;
                       &lt;select v-model="selectedRoomID"&gt;
                         &lt;option disabled selected&gt;Rooms&lt;/option&gt;
                         &lt;option v-for="room in rooms" v-bind:value="room.RoomID"&gt;{{room.Room}}&lt;/option&gt;
                       &lt;/select&gt;
                       &lt;label&gt;Room:&lt;/label&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="row"&gt;
                    &lt;div class="input-field col s12"&gt;
                       &lt;select  v-model="selectedTopicID"&gt;
                         &lt;option disabled selected&gt;Topics&lt;/option&gt;
                         &lt;option v-for="option in selectedRoom" v-bind:value="option.TopicID"&gt;{{option.Topic}}&lt;/option&gt;
                       &lt;/select&gt;
                       &lt;label&gt;Topic:&lt;/label&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>      var data = &lt;%=return_message%&gt;; 
        let arrRooms = _.uniqBy(data, function (e) {
           return e.Room;
        });
        let arrTopics = _.uniqBy(data, function (e) {
           return e.Topic;
        });
        let arrDps = _.uniqBy(data, function (e) {
           return e.DiscussionPoint;
        });
  
        document.addEventListener('DOMContentLoaded', function() {
              var elems = document.querySelectorAll('select');
              var instances = M.FormSelect.init(elems, {});
        });
  
        var chatReportsMenuComponent = new Vue({
           el: "#reports-menu",
           created: function () {
                 document.getElementById("reports-menu").style.display = "block";
                 //GET TOPIC INFO - PASS TOPIC PARAM;
                 this.initialize();
           },
           data: {
              selectedRoomID: undefined,
              rooms:arrRooms,
              selectedTopicID: undefined,
              topics:arrTopics,
              dps:arrDps
           },
           methods: {
              initialize: function () {
                 var self = this;
              }
           },
           computed:{
              selectedRoom: function(){ 
                 var filteredTopics = _.filter(arrTopics,{'RoomID': this.selectedRoomID})
                 console.log("Filterd Topics: ", filteredTopics)
                 return filteredTopics
              }
           }
        })
  </code></pre>