Привязка к методу в LegendFormatter dygraphs с использованием Vue-js

Question

Я пытаюсь объединить dygraphs с Vuejs. Здесь есть неполный пакет npm здесь , но он выглядит заброшенным, и я не могу заставить его работать, поэтому я написал свой собственный компонент для линейной диаграммы:

<template>
<div class="linechart">
            <md-card>
                <md-card-header>
                    <div class="md-title">{{ title }}</div>
                </md-card-header>
                <md-card-content>
                    <div class="md-layout md-gutter">
                        <div class="md-layout-item md-size-100">
                            <div style="width:100%;" :id="id"></div>
                        </div>                        
                    </div>
                </md-card-content>
                <md-card-actions>
                    <div class="legend">
                        <div :id="legendId"></div>
                    </div>
                </md-card-actions>
            </md-card>
</div>
</template>

<script>
import Dygraph from 'dygraphs'
import 'dygraphs/dist/dygraph.css'


export default {
    name: 'Linechart',
    props: ['data', 'options', 'id', 'title'],
    data() {
        return {
            detailSerie: ''
        }
    },
    computed: {
        legendId() {
            return this.id + '_legend';
        }
    },
    methods: {
        click() {
            // click
        }
    },
    mounted: function() {
        // concat label div to options
        let localOptions = {...this.options, 
            labelsDiv: document.getElementById(this.legendId), 
            legendFormatter: legendFormatter

            };
        new Dygraph(
            // containing div
            document.getElementById(this.id),
            this.data,
            localOptions
            );
        }
}

function showDetail(seriesName) {
    console.log(seriesName);
}

function legendFormatter(data) {
  if (data.x == null) {
    // This happens when there's no selection and {legend: 'always'} is set.
    var html_blank = '';
    data.series.forEach(series => {
        html_blank += '<button href="#" onclick="showDetail(' + series.labelHTML + ')" class="md-button" style="text-align:center; vertical-align:bottom;color:' + series.color + ';">' + series.labelHTML + ' </button>';
    });
    return html_blank;
  }

  var html ='<span class="md-button">' + this.getLabels()[0] + ': ' + data.xHTML+'</span>';
  data.series.forEach(function(series) {
    if (!series.isVisible) return;
    var labeledData;
    if (series.isHighlighted) {
        labeledData = '<span class="md-button" style="text-decoration: underline; text-decoration-style:double; color:' + series.color + ';">'+ series.labelHTML + ': ' + series.yHTML+"</span>";
    }
    else
    {
        labeledData = '<span class="md-button" style="color:' + series.color + ';">'+ series.labelHTML + ': ' + series.yHTML+"</span>";
    }
    html += ' ' + labeledData;
  });
  return html;
  }
</script>

<style>
.legend {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    vertical-align: bottom;
}
.dygraph-xlabel {
    display: flex;
    justify-content: center;
}

.linechart {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}
</style>

Он получает данные серии, заголовок и несколько других параметров в качестве входных данных с использованием реквизита и рисует диаграмму. Мне нужна настроенная легенда, поэтому я даю функцию форматирования пользовательских легенд. Функция выполняет то, что, если какой-либо ряд не фокусируется курсором, он отображает кнопки с именами и цветами ряда, чтобы пользователь мог щелкнуть, чтобы открыть подробный график этого:

Если отслеживается какой-либо из рядов, он покажет детали точки с выбранной серией, подчеркнутой двойной линией:

Пока все хорошо. Проблема в том, что, поскольку пользовательский форматировщик dygraphs является в основном html-запиской, я не могу в нем выполнять привязку функций. Ни одно из следующих действий не сработало:

        html_blank += '<button href="#" onclick="showDetail(' + series.labelHTML + ')" class="md-button" ...
        html_blank += '<button href="#" @onclick="showDetail(' + series.labelHTML + ')" class="md-button" ...
        html_blank += '<button href="#" v-on:onclick="showDetail(' + series.labelHTML + ')" class="md-button" ...

Я также поместил функцию legendformatter как метод в экземпляре Vue, как отдельную функцию ... и т. Д. безрезультатно:

Есть ли способ сделать это, или я должен переосмыслить структуру?