<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">Can vuejs support binding of asynchronous properties?</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">var data = {}<br>
Object.defineProperty(data, 'asyncProperty', {<br>
async get() {<br>
// async network or database query<br>
return true;<br>
}<br>
});</p>
<p dir="auto">I'm having a problem showing filtered results when using v-if inside a v-for template block.  My current template looks like this (I'm using laravel so the <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/include/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/include">@include</a> is just some html that gets inserted to show the proper markup for that type of card):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;ul&gt;
    &lt;template v-for=&quot;card in cards | onlyMatching&quot;&gt;
        &lt;li transition=&quot;expand&quot; v-if=&quot;card.Data.event_type === 'user_comment'&quot;&gt;
            @include('feed.card_templates.user_comment')
        &lt;/li&gt;

        &lt;li transition=&quot;expand&quot; v-if=&quot;card.Data.event_type === 'user_position'&quot;&gt;
            @include('feed.card_templates.user_position')
        &lt;/li&gt;
    &lt;/template&gt;
&lt;/ul&gt;"><pre class="notranslate"><code class="notranslate">&lt;ul&gt;
    &lt;template v-for="card in cards | onlyMatching"&gt;
        &lt;li transition="expand" v-if="card.Data.event_type === 'user_comment'"&gt;
            @include('feed.card_templates.user_comment')
        &lt;/li&gt;

        &lt;li transition="expand" v-if="card.Data.event_type === 'user_position'"&gt;
            @include('feed.card_templates.user_position')
        &lt;/li&gt;
    &lt;/template&gt;
&lt;/ul&gt;
</code></pre></div>
<p dir="auto">In my component I have a data property called "filterKey" which the custom filter uses to filter results.  So my custom filter looks like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Vue.filter('onlyMatching', function(cards)
{
    var $this = this;

    return cards.filter(function(item)
    {
        return item.Data.event_type.match($this.$data.filterKey);
    });
});"><pre class="notranslate"><code class="notranslate">Vue.filter('onlyMatching', function(cards)
{
    var $this = this;

    return cards.filter(function(item)
    {
        return item.Data.event_type.match($this.$data.filterKey);
    });
});
</code></pre></div>
<p dir="auto">The problem is - whenever I dynamically change the filterKey property from user_comment to user_position the HTML that is rendered from the template doesn't update.  And when I click off of one and back to the other it actually duplicates the original html in the browser.  When I look at devtools I can see the filter type changing but it's not reflected on the actual page.</p>
<p dir="auto">I know the filter itself is working properly - because if I take out the conditional parts and just do this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;ul&gt;
    &lt;template v-for=&quot;card in cards | onlyMatching&quot;&gt;
        &lt;li&gt;@{{{ card.Data.event_type }}}&lt;/li&gt;
    &lt;/template&gt;
&lt;/ul&gt;"><pre class="notranslate"><code class="notranslate">&lt;ul&gt;
    &lt;template v-for="card in cards | onlyMatching"&gt;
        &lt;li&gt;@{{{ card.Data.event_type }}}&lt;/li&gt;
    &lt;/template&gt;
&lt;/ul&gt;
</code></pre></div>
<p dir="auto">The event types for each of these items list out just fine - and changing the "filterKey" property shows only those li's that match as expected.  Is there some other way I need to go about doing this conditional rendering to make this work as expected or should it work the way I have it now?</p>