如何在聚合物中使用jQuery动态改变数组？

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<dom-module id="my-element">
  <template>
    <template is="dom-repeat" items="{{myArray}}">
      <div>{{item}}</div>
    </template>
  </template>
  <script>
    Polymer({
      is: 'my-element',
      properties: {
        myArray: {
          type: Array,
          value: function() {
            return [];
          }
        }
      }
    });
  </script>
</dom-module>

Polymer({
  is: 'my-element',
  properties: {
    myArray: {
      type: Array,
      value: function() {
        return [];
      }
    }
  },
  ready: function() {
    var self = this;
    $('#changeArrayButton').click(function() {
      self.push('myArray', 'New Item');
    });
  }
});

<my-element></my-element>
<button id="changeArrayButton">Change Array</button>