Why doesn't the v-html directive work?

Question

Pug

I want to display the svg markup of the icon inside the block created in the component, to which I deliver this icon via props.

<script>
  var Vue = require("vue/dist/vue.js");
  vHeader = Vue.component("vheader", {
    props: ['icons'],
    created: function(){
      console.log(this.$props);
    }
  });
  module.exports = vHeader;
</script>
<template>
  <header class='header'>
    <div class='plate row row--center-y row--between-x'>
      <div class='header__logo' v-html='icons.projectMenu'></div>
    </div>
  </header>
</template>

There are props in Vue DevTools, output to the console when in the created callback - also there. But it doesn't render to the page. There are no errors either in the terminal or in the browser. Instance code (careful - coffee. I'm awake at 5 am):

Vue = require "vue/dist/vue.js"
axios = require 'axios'
class VueEntry
  init: ->
    new Vue 
      el: "#vhead"
      data: ->
        return "icons": {}
      components: 
        "vheader": require("./header/header.vue")
      created: ->
        that = this
        axios.get('/jsondata/etc/icons.json')
          .then (resp) ->
            Object.assign that.$data.icons, resp.data
          .catch (err) ->
            console.log err


module.exports = VueEntry

Answer 1

I don't quite understand how it works for you, but I'll tell you for sure. New parameters added to the object are not reactively tracked. More details here
. Alternatively, receive data by promise