VUE.JS не может отображать данные JSON в цикле

Question

Здравствуйте, я пытаюсь зациклить файл JSON:

https://codepen.io/jonas2422/pen/wNLOBy?editors=1010 Я поместил текст JSON в html ...

Итак, переходя к проблеме, я получил вседанные с использованием инструментов AXIOS и VUE.JS подтверждают это: http://prntscr.com/morfat

Код:

<div v-bind:key="nav.id" v-for="nav in navigation">

  <li>
    <router-link :to="{ path: whiteSpace(nav.linkTitle) }">{{nav.linkTitle}} <i v-show="nav.sub" class="fas fa-caret-down navdrop"></i></router-link>


    <div v-if="nav.sub" v-show="nav.sub" class="subnavigation">

      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <p>Casuals</p>
            <ul>
              <div v-bind:key="realsub.id+1" v-for="realsub in subnavreal">
                <div v-if="nav.linkTitle == 'Male'">
                  <li>
                    <router-link :to="{ path: whiteSpace(realsub.male.casual) }">{{realsub.male.casual}}</router-link>
                  </li>
                </div>

                <div v-if="nav.linkTitle == 'Female'"></div>
                <li>
                  <router-link :to="{ path: whiteSpace(realsub.female.casual) }">{{realsub.female.casual}}</router-link>
                </li>


              </div>

            </ul>

          </div>
          <div class="col-lg-6">
            <p>Formal</p>
            <ul>
              <li>
                <router-link :to="{ path: whiteSpace(nav.formals.link) }">{{nav.formals.link}} </router-link>
              </li>
            </ul>

          </div>
          <div class="col-lg-12">
            <div class="footer_margin">
              <div class="footer_award">
                <h2>Autumn sale</h2>
                <p>Up to 50% sale</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </li>

</div>

И по какой-то причине он просто не появляется, я попробовал все.

JS код:

data() {
    return {
      subnavreal: []

    }
  },
  props: ["navigation"],
  methods: {
    whiteSpace(a) {
      return a.toLowerCase().replace(/\s/g, "");
    }
  },
  created() {

    axios.get('/products.json')
      .then(res => this.subnavreal = res.data)
      .catch(err => console.log(err));


  }