Я пытаюсь следовать документации:

Но по какой-то причине мой шаблон не работает должным образом, как только я добавлю {amp}lt;template v-if="variable"{amp}gt; vue ничего не отобразит.

 {amp}lt;script type="text/x-template" id="dashboard-inititial-message"{amp}gt; {amp}lt;template v-if="okBoom"{amp}gt; {amp}lt;h1{amp}gt;Title{amp}lt;/h1{amp}gt; {amp}lt;p{amp}gt;Paragraph 1{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;Paragraph 2{amp}lt;/p{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;div v-if="ok"{amp}gt; {amp}lt;h1{amp}gt;Title{amp}lt;/h1{amp}gt; {amp}lt;p{amp}gt;Paragraph 1{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;Paragraph 2{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div v-else{amp}gt; {amp}lt;p{amp}gt;ELSE{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/script{amp}gt; 

Любой совет?

Отрывки, которые демонстрируют проблему:

https://jsfiddle.net/o2tL2ems/1/

Питер указал на это в комментарии. Шаблон не может быть корневым элементом, и обычно корневой тег может быть только один.

Поэтому, когда у вас есть такой шаблон:

 {amp}lt;script type="text/x-template" id="dashboard-inititial-message-mk1"{amp}gt; {amp}lt;div v-if="okBoom"{amp}gt; {amp}lt;h1{amp}gt;Title{amp}lt;/h1{amp}gt; {amp}lt;p{amp}gt;Paragraph 1{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;Paragraph 2{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;h3{amp}gt;adas{amp}lt;/h3{amp}gt; {amp}lt;div v-if="ok"{amp}gt; {amp}lt;h1{amp}gt;Title{amp}lt;/h1{amp}gt; {amp}lt;p{amp}gt;Paragraph 1{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;Paragraph 2{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/script{amp}gt; 

Вы в основном спрашиваете vue.js о проблемах. Vue прекратит синтаксический анализ вашего шаблона, как только завершится div с okBoom.

По всему интернету есть вопросы, похожие на мои:

Решение вкратце. Оберните ваш шаблон в master span, div или transition (этот, однако, выглядит немного хакерским, с другой стороны, он не будет генерировать ненужные HTML-теги).

Я использую условный рендеринг шаблонов для загрузчиков (пока выполняется запрос к серверу)

 new Vue({ el: "#app", template: `{amp}lt;div v-else class='somePage'{amp}gt; {amp}lt;template v-if="isLoading"{amp}gt; {amp}lt;div{amp}gt;LOADING...{amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;template v-else{amp}gt; {amp}lt;h1{amp}gt;title{amp}lt;/h1{amp}gt; {amp}lt;p{amp}gt;The final rendered result will not include the "template" element.{amp}lt;/p{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;/div{amp}gt;`, data: () ={amp}gt; ({ isLoading: true }), mounted() { setTimeout(this.getData.bind(this), 1500); }, methods: { async getData() { // await axios ...do some request... this.isLoading = false } } }); 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div id="app"{amp}gt;{amp}lt;/div{amp}gt;