Aurelia binding value from Duet Date Picker

I have a view in Aurelia which has a Duet Date Picker in it. I created a component which just injects the Duet Datepicker into the page based on the element (template) passed to it. Here are the relevant code snippets:

    <label for="nextPaymentDatepicker">Next Payment Date</label>
    <duet-date-picker identifier="nextPaymentDatepicker"
import { autoinject, bindable } from 'aurelia-framework';
import * as moment from 'moment';
export class SetupInstallments {
    @bindable nextPaymentDate: any;
    // ... other bindings, etc

    constructor() { /*...*/ }

    validateNextPaymentDate() {
        //this.nextPaymentDate is undefined here:
        let date = moment(this.nextPaymentDate, 'YYYY-MM-DD');

The above only has <template> tags just so that the tag <duet-date-picker> is injected into the page (I know that this is a bit round-about, but it seemed to be the ‘Aurelia’ way of inserting a widget in a reusable manner). The actual datepicker itself is injected by defineCustomElements() in the class below:

import { bindable, inject } from 'aurelia-framework';
import { defineCustomElements } from '@duetds/date-picker/dist/loader';

 * Wrapper class for duet-date-picker (@duetds/date-picker)
export class DuetDatePicker {
    @bindable businessTimezone: any;
    @bindable value: any;
    element: any;

    constructor(element) {
        this.element = element;

    attached() {
        defineCustomElements(this.element); // injects picker

The Question:

The value from the <duet-date-picker> section never seems to make it to nextPaymentDate in the SetupInstallments object. There ends up being both a value.bind attribute as well as a value attribute (the second of which is injected when defineCustomElements() is run). Is there a recommended way of getting Aurelia to pick up on the second value tag which is inserted?