[Vuejs]-Vue.js: toggle method changing the value, but no behaviour is changed in view

this in your method is not pointing to the vue instance, so use a normal function instead of fat arrow function

methods: {
  toggle: function(dropDownName) {
    if (dropDownName === 'Meer') {
      this.dropDownOpen = !this.dropDownOpen
    }
    console.log(this.dropDownOpen)
    return this.dropDownOpen
  }

See the warning why you should not use => arrow functions with methods

add v-show attribute like this in your template.

<ul v-show="dropDownOpen" class="drop-down-menu">

Do not know exactly but this worked:

 methods: {
      toggle(dropDownName) {
        if (dropDownName === 'Meer') {
          this.dropDownOpen = !this.dropDownOpen
        }
        return this.dropDownOpen
      }
    },

and template:

 <ul>
      <li v-for="(navHeading, index) in headerMenuItems" @click="toggle(navHeading.name)">
        <icon :glyph="navMenuIconNames[index]" :viewBox="navMenuIconNames[index].viewBox" :height="25" :width="50"></icon>
        <span>{{ dropDownOpen }}</span>
        <a class="navigation-title" href="#">{{ navHeading.name }}</a>
        <ul v-show="dropDownOpen" class="drop-down-menu">
          <li v-for="dropDownMenuItem in navHeading.children">
            <a class="drop-down-menu-item-title">{{ dropDownMenuItem.name }}</a>
          </li>
        </ul>
      </li>
 </ul>