Array-based query parameters

I have an Ember (2.14.2) array-based query param set up in my controller & route:

// controller
import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['color'],
  color: [],
  actions: {
    setColor(color){
      this.set('color', [parseInt(color.id)])
    }
  }
});

and:

// route
import Ember from 'ember';

const {Route} = Ember;

export default Route.extend({
  queryParams: {
    color: {
      refreshModel: true
    }
  },
  model(params) {
    return this.store.findAll('color', params);
  }
});

and:

<ul>
  
    <li>qp: </li>
  
</ul>

<ul>
  
    <li >obj: </li>
  
</ul>

I'm noticing, that when I first click an element and replace the query param array, the URL correcetly changes to:

?color=%5B1%5D (i.e. ?color=[1])

If I manually reload the page, or if I visit the page with this query parameter enabled, Ember replaces/decodes the query parameter to:

?color="%5B3%5D" (i.e. ?color="[1]")

If I refresh the page again:

?color="%5C"%5B3%5D%5C"" (i.e. ?color="\"[3]\"")

So it would appear that while Ember is encoding the URLs correctly, it's not decoding incoming query parameters correctly and it interpreting them as strings as opposed to arrays?