Laravel : How to hide the interpolation code before Vue js loads?

Question

I have a Laravel website, when I use Laravel to load my data from the database, then a pass the results to JavaScript this way

<script>
window.forfaits = <?php echo json_encode($results); ?>;
</script>

Then I use Vue js v-for to display my data. The problem is that I see interpolation on the home page before Vue Js loads and v-cloak can't do the work since I'm getting my data with php then pass to js.

How can I do so that interpolation doesn't show on the page?

UPDATE

By interpolation I mean this:

And here is my main.blade.php file which is loaded as the home page:

<script>
window.forfaits = <?php echo json_encode($forfaits); ?>;
</script>
@extends('layouts.app')

<div>
@section('main-content')
<div class="col-sm-8 col-md-9">
    <div id="filter-items">
        <div class="product-item offre" v-for="forfait in filteredForfaits">
            <div class="product-na">
                <h3 class="product-name">@{{forfait.nom_forfait}}</h3>
                <div class="product-actions">
                 ............................

Answer 1

If you're trying to use v-cloak to hide uncompiled templates you should create CSS rule as described here: https://vuejs.org/v2/api/#v-cloak

It works really simple. Uncompiled templates is hidden by v-cloak css rule. If Vue compiler seeing v-cloak attribute on the compiled template, it simply deletes the attribute and your component appears on the page.

[v-cloak] {
  display: none;
}

Have you include it?

Also, you must be sure that css file, contains [v-cloak] rule will be loaded at a time the uncompiled Vue templates appears. You should decide critical css or use rel="preload" (already available in modern browsers) for that piece of css.