Initializing materialize elements in Vue.js

How can I initialize the Materializes’ select or modal elements in Vue.js? When I add the following code in my document ready the elements do not work.

<script> 

$(document).ready(function() {
  $('.modal-trigger').leanModal('open');
  $('select').material_select();
});

//Vue.js code here...   
 
</script> 

Answer

You could try and call this code in one of Vue’s lifecycle hooks (see this diagram to find out where exactly they’re executed), you’ll probably want to use mounted.

But keep in mind this isn’t really a bulletproof solution. Vue may manipulate the DOM in different ways later and as such isn’t necessarily compatible with Materialize. The best solution in these cases is always to find a framework-specific implementation of the components you’re trying to use, e.g. Vue Material.