Привязка данных между одноуровневыми элементами в шаблоне Polymer dom-bind

У меня есть шаблон <dom-bind>, содержащий два элемента: один — кнопка, другой — список. Когда список загружается (его свойство loading равно true), свойство кнопок active должно быть установлено в false, и наоборот.

Я не могу заставить привязку между ними работать. Конечно, я мог бы создать новый элемент из всего этого, но я бы предпочел избегать этого, если это возможно.

Это мой шаблон <dom-bind>:

<dom-bind id="messageListScreen">
    <template>
        <paper-progress-button on-click="fetchNewMessages" active="[[!loading]]" active-text="Refresh" inactive-text="Refreshing..." raised></paper-progress-button>
        <message-grid id="grid" loading="{{loading}}"></message-grid>
    </template>
</dom-bind>

С приведенным выше кодом ничего не происходит. Если я сделаю это

<script>
    document.addEventListener("WebComponentsReady", function(event){
        let self = document.getElementById('messageListScreen');
        self.loading = self.$.grid.loading;
    });
</script>

self.loading действительно получает значение grid.loading, но когда значение grid.loading изменяется, значение self.loading остается прежним.

Есть ли способ привязать значение grid.loading к свойству active <paper-progress-button> с помощью <dom-bind>?