Materialize.css select not updating Vue.js model value

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() {
    	
    }
})