v-bindで読み込む画像ファイルに対してvue-lazyloadを使用する方法がわからない

Question

v-bindで読み込む画像ファイルに対してvue-lazyloadを使用する方法がわかりません。

vue-lazyloadを適用するためには下記のようなコードを追加するみたいなのですが、
v-bindとv-lazyをどうやって共存させればいいかわかりません。

https://medium.com/nyle-engineering-blog/vue-js%E5%AE%9F%E8%A3%85%E3%81%AEweb%E3%82%A2%E3%83%97%E3%83%AA%E3%81%ABlazy-load%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B-f293e71392d5

https://liginc.co.jp/374414

参考コード

<img v-lazy="title.image" /> 
// v-lazyで指定をする

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
  <script>
Vue.use(window.VueLazyload, {
  // 画像の読み込みが発生する位置
  // 画像の上端が、ウインドウの上端から{ウインドウの高さ*preLoadの値}分すすんだ位置を通過するときに発生する
  preLoad: 0.7,
  // エラー時の代替画像
  error: "img/error.gif",
  // ローディング中の代替画像
  loading: "img/loadinf.gif",
  // 画像リクエスト試行回数
  attempt: 1, // コールバックの実行が過密にならないように設定する
  throttleWait: 100
});
  <script>

尚、現状のコードは下記のとなります。

vue-lazyloadを使用する前のコード

	<div id="app">
           <ul class="item" v-for="data in dataList" :key="pic.id">
                   <li><img v-bind:src="[data.pic]" /></li>
	   　　　</ul>
	</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  <script>
  var dataList = [
  { id: 01, pic: "img/pic1.jpg" },
  { id: 02, pic: "img/pic2.jpg" },
  { id: 03, pic: "img/pic3.jpg" },
  { id: 04, pic: "img/pic4.jpg" },
  { id: 05, pic: "img/pic5.jpg" },
  ];
 
  var vm = new Vue({
  el: "#app",
  data: {
  dataList: dataList
  	}
  });
  </script>

Answer 1

下記の情報をもとにコードを変更したら思ったような動きになりましたので、参考でお伝えします。

https://github.com/hilongjw/vue-lazyload#basic

Vue.use(window.VueLazyload, {
   lazyComponent: true　// 追加

});

<lazyComponent class="item" v-for=“(data in dataList” :key=“pic.id">
       <li><img v-bind:src=“[data.pic]” /></li>
</lazyComponent>

尚、他でいいやり方があれば教えてもらえると助かります。