In the template:

<div v-bind:class="[currentPage === 'help' ? highlight : '']">

highlight is a property of the Vue instance/component. It is being evaluated, but since it probably is empty (undefined) you get nothing.

Since you want the string, do:

<div v-bind:class="[currentPage === 'help' ? 'highlight' : '']">

In the template:

<div v-bind:class="[currentPage === 'help' ? highlight : '']">

highlight is an identifier.

Thus, such expression expects that highlight is property of the Vue instance/component. It is being evaluated, but since it probably is empty (undefined) you get nothing.

Since you want the string, do:

<div v-bind:class="[currentPage === 'help' ? 'highlight' : '']">

Demo:

new Vue({
  el: '#vueApp',
  data: {
    currentPage: 'help',
  }
})

.highlight { background-color: yellow }

<script src="https://unpkg.com/vue"></script>

<div id="vueApp">
  <div v-bind:class="[currentPage === 'help' ? 'highlight' : '']">Hello</div>
</div>