How to update polymer component on model change

Question

I have a simple Polymer component that get's data from an external url, in this example, a json placeholder, in the future this will be consuming from an API.

What I want to do is update the displayed data upon model update, if the exposed data from the API response changes, I need to reflect it to the HTML almost immediately (maybe using web sockets, signal R in my case).

<dom-module id="ajax-test">
<template>

    <!-- GETS THE DATA FROM A SOURCE -->
    <iron-ajax auto
               url="https://jsonplaceholder.typicode.com/users"
               handle-as="json"
               last-response="{{ajaxResponse}}">
    </iron-ajax>

    <table class="tg">
        <caption><span>USERS</span></caption>
        <template is="dom-repeat" items="[[ajaxResponse]]">
            <tr>
                <th class="tg-yw4l">[[item.name]]</th>
                <th class="tg-yw4l">[[item.username]]</th>
                <th class="tg-yw4l">[[item.email]]</th>
                <th class="tg-yw4l">[[item.address.street]] [[item.address.suite]] </th>
            </tr>
        </template>

    </table>

    <!-- SHOW THE FETCHED DATA -->
    <br />
    <pre>[[json(ajaxResponse)]]</pre>

</template>
<script>
    class AjaxTest extends Polymer.Element {
        static get is() { return 'ajax-test'; }

        static get properties() {
            return {
                prop1: {
                    type: String,
                    value: "bar"
                }
            }
        }

        json(obj) {
            return JSON.stringify(obj, null, 2);
        }
    }
    customElements.define(AjaxTest.is, AjaxTest);

</script>