example works in js-fiddle but not in self-made page

This js-fiddle example is working as it should:

But when I try to load this example on my own, the dropdown menu doesn't show anything -- even though it does in the js-fiddle example (try entering "wireless" in the input box.)

This is my html:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

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

      <input v-model="offer.tags"></input>
      <select>
        <option v-for="(key, value) in offer.units" v-bind:value="offer.units">
          {{ key }}
        </option>
      </select>
    </div>
  </body>

        <script src="./js/app.js"></script>
</html>

And here is the js:

var protocol = {
  "wireless": {
    "units": {
      "bandwidth": "bit/s, Mb/s, Gb/s",
      "distance": "kilometers, miles"
    },
    "children": [],
  }

};

var vm = new Vue({
  el: '#app',
  data: {
    offer: {
      tags: '',
      units: {}
    },
    protocol: protocol
  },
  watch: {
    'offer.tags': {
      handler: function() {
        var tagList = this.offer.tags.split(',');
        console.log(tagList);

        for (var i = 0; i < tagList.length; i++) {
          console.log(tagList[i]);
          try {
            var unitsObj = this.protocol[tagList[i]]["units"];
            var unitKeys = Object.keys(unitsObj);

            for (var i = 0; i < unitKeys.length; i++) {

              if (!unitsObj[unitKeys[i]]) {
                console.log("updating units");
                // update dict only if it doesn't already contain key
                this.offer.units[unitKeys[i]] = unitsObj[unitKeys[i]];
              }

              this.offer.units[unitKeys[i]] = unitsObj[unitKeys[i]];
            }
            console.log(this.offer.units);
          } catch (e) {
            return true
          }
        }
      }
    }
  }
});

Any ideas as to what could be the problem?

Here's what the console prints out in the offline version - it's the same as the online version:

    Array [ "wireless" ]
app.js:27:9
    wireless
app.js:30:11
    Object { bandwidth: "bit/s, Mb/s, Gb/s", distance: "kilometers, miles", 1 more… }

So, apparently the dictionary is being updated as I expect.

Solution

The Problem is the Version of Vue JS you are using. the one you mentioned here is different and the one you are using in jsfiddle is different.

Please remove the one u mentioned here and add the following.

<script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>

It will work fine.