How to refresh or observe the Item is been added to cart using knockout JS UI component?

I have added a custom function which checks if the product has already been added in a quote or not. This works fine and shows button text accordingly. The only issue that it requires to refresh the page when adding to a quote button is pressed. How to observe these vars in Knockout Js so it updates on change.

return Component.extend({
    addedToCart: ko.observable(false),
    quote: {},
    /**
     * @override
     */
    initialize: function () {
        this._super();
        this.quote = customerData.get('quote');
        return this._super();
    },

    checkProductAddedToQuote: function (id) {

        var items = this.quote().items;
        if (!_.isUndefined(items)) {
            if ($.inArray(id, $.map(items, function (item) { return item.product_id; })) > -1) {
                return true
            }
        }
        return false;
    },


});

in my phtml file I am accessing like this

<button data-bind="scope: 'quote'" type="button"
                    title="<?php /* @escapeNotVerified */ echo $buttonTitle ?>"
                    class="action primary toquote"
                    id="product-addtoquote-button">
        <span data-bind="text: quote().summary_count > 0 ? ( checkProductAddedToQuote('<?php /* @escapeNotVerified */ echo $_product->getId() ?>') === true ? 'Added to Quote' : 'Add to Quote' ): 'Request a Quote'"></span>
    </button>