Materialize.css select not updating Vue.js model value

by andinfo

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<body>

  <select id='regular-select' v-model='regular_select'>
    <option value='1'>Regular option 1</option>
    <option value='2'>Regular option 2</option>
  </select>
  
  <select id='materialize-select' v-model='materialize_select'>
    <option value='1'>Materialize option 1</option>
    <option value='2'>Materialize option 2</option>
  </select>
  
  <p>
    Regular select: <b>{{ regular_select }}</b>
  </p>
    <p>
    Materialize select: <b>{{ materialize_select }}</b>
  </p>
</body>

CSS

body {
  padding: 20px;
}

#regular-select {
  display: block;
}

JavaScript

new Vue({
    el: 'body',
		ready: function() {
    	var suspend = false;
    	$('#materialize-select').material_select();
      $('#materialize-select').on('click', function() {
      	if (!suspend) {
        	suspend = true;
          var event = new CustomEvent('change', {
            detail: 'change',
            bubbles: true
          });
          $(this).get(0).dispatchEvent(event);
        }
      });
    }
})