Mac OSX: 10.11.6 | Chrome: 64.0.3282.119 | Bootstrap Vue: ^1.4.0

I have my Page Navigation setup like so:

<b-pagination-nav
      :link-gen="linkGen"
      :v-model="currentPage"
      :number-of-pages="totalPages"
      :hide-goto-end-buttons="hideNavEndButtons"
      align="center"
      @input="changeAvailablePage" />

with my wrapper component data like so:

data() {
    return {
           hideNavEndButtons: true,
           currentPage: 1,
           totalPages: 1,
    }
},

I save my page settings at points to the url to allow for the link to be shared and the receiving user to have the same view of the table.

So when loading the wrapper component I parse the url and update the currentPage and totalPages:

loadFromURL() {
    ....
    this.currentPage = urlData.currentPage;
    ...
}

While inspecting the component in the browser using the Vue extension for Chrome, I'm seeing the currentPage updates in the wrapper component, but it does not update in the Procedure Navigation component. This means the the Page Navigation component continues to show the wrong page number highlighted (page 1, while the this.currentPage reflects 3).

My expectation is that if I update the data (currentPage/totalPages) in the wrapper component, this should propagate to the Page Navigation component.

Any ideas on what I may be doing wrong or if this is a bug?