VueJS 2 properties not being passed to production

I am struggling to get properties to work in the build of my Vue app. Everything seems to work fine in development, but when the app is compiled it doesn't. Take this navigation component I'm using for example:

navigation.js:

import Vue from 'vue';
import template from './navigation.html';

export default Vue.extend({
  props: ['activePage'],
  template,
  methods: {
    setActivePage: function() {
      // Set activeEl to ref (see template) that corresponds to activePage parameter
      var activeEl = this.$refs[this.activePage];
      if (activeEl) {
        activeEl.className += ' active';
      }
    }
  },
  mounted: function() {
    this.setActivePage();
  }
});

      

        
        
        
      

    

navigation.html:

<div class="container">
    <nav class="navigation">
        <div class="navigation__bar">
            <router-link to="/"><img class="navigation__brand" src="placeholder" /></router-link>

            <ul class="navigation__links">
                <li class="navigation__link" ref="a"><router-link to="/">a</router-link></li>
                <li class="navigation__link" ref="b"><router-link to="/b">b</router-link></li>
                <li class="navigation__link" ref="c"><router-link to="/c">c</router-link></li>
            </ul>
        </div>
    </nav>
</div>

      

        
        
        
      

    

This is how I use this component:
<navigation activePage="a"></navigation>

So this component takes a property activePage

, checks the template if there is a ref that matches the value activePage

, and if true, it adds the class active

to the ref element. It works with a development build, but in production it results in this:

<div class="container" activepage="cases">

Am I doing something wrong here? My project is based on this template, if it matters: https://github.com/villeristi/vue.js-starter-template