How to update polymer component on model change - websocket

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>