<style> тег не работает в элементе vue.js

Question

Пример:

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Bob'
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  Hello {{name}}
  <style>
  body { color: blue; }
  </style>
</div>

JS Fiddle: https://jsfiddle.net/7g1vp68b/6/

Когда тег находится за пределами элемента vue, он отображается нормально.

Answer 1

Vue не может разобрать <style> внутри шаблона.

Если вы проверяете консольный журнал, появляется предупреждение:

Шаблоны должны отвечать только за отображение состояния в пользовательский интерфейс. Избегайте размещения тегов с побочными эффектами в ваших шаблонах, таких как , так как они не будут анализироваться.

Вы должны поместить <style></style> вне шаблона Vue или использовать Отдельный компонент Vue