JetpackCompose でLazyColumn にコールバック渡すと描画できなくなる問題

## 概要
どうしようもないKotlinの初心者です。

やりたいことは、

- `MyScreen`に　`CardList`を表示したい
- `CardList` は ViewModelを持っていて、非同期でAPIからリストをフェッチしてくる
- リストはフェッチされた後、`LazyColumn`で描画される
- もしフェッチしてきたときにトークンがExpireしていたら、Login画面に戻るためのコールバックを呼びたい
- コールバックは`MainActivity` （NavControllerを定義している箇所）から引っ張ってきている

## 問題
このときに、
コールバックをCardListに渡さないときはLazyColumnの描画が問題なく行われるのですが、
コールバックを渡すとLazyColumnの描画が行われず、なぜそうなるのか理解できていません。

## 描画される時のコード（コールバック渡し無し）

```MainActivity.kt

// myscreen の定義
composable("myscreen") {
    MyScreen(
        // MyScreen にlogin
        goBackToLoginCallback= {
            navController.navigate("log_in")
        }
    )
}

...
//この下に log_in コンポーザブルも定義されている
```

```MyScreen.kt
@Composable
fun MyScreen(
// このコールバックはMainActivityから引っ張ってきているが、今回はCardListには渡さない
    goBackToLoginCallback: () -> Unit　
) {
    // CardList を表示させるだけのMyScreen コンポーザブル
    CardList()
}
```

```CardList.kt
@Composable
fun CardList() {
    var viewModel: CardListViewModel = CardListViewModel()
    val context = LocalContext.current
    val value by viewModel.repositories

    // LaunchedEffect で最初にgetListsしてViewModelを更新
    LaunchedEffect(key1 = Unit){
        viewModel.getLists(
            context = context,
        )
    }

    // 以下LazyColumnの描画
    // もしviewModelの結果にエラーがあり、トークンがエクスパイアしていれば、という条件で書き分けたい
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(start = 16.dp, top = 8.dp, end = 16.dp, bottom = 8.dp)
    ) {
        // Content inside the Box
        // もしエラーなくリストがフェッチできればLazyColumnを描画する
        if(!value.has_error){
            LazyColumn(
                verticalArrangement = Arrangement.spacedBy(12.dp),

                ) {
                items(value.result){ item ->
                    Surface(){
                        // 非同期で取ってきたデータに応じてカードを表示
                        Card(item)
                    }
                }
            }
        }
        // もしエラーがあれば何かする
        else{
            if(value.error_message== APIErrorType.UNAUTHORIZED.content){
                //コールバックを呼ぶつもりだが、今回は何もしない
            }
        }
}
```

このときは問題なくMyScreenにCardListが表示されます。


## 描画されない時のコード（コールバック渡しあり）

```kotlin
@Composable
fun MyScreen(
    goBackToLoginCallback: () -> Unit
) {
    CardList(
        // コールバックをそのままCardListに渡している
        callbackForGoBackToLogin = goBackToLoginCallback
    )
}
```


```kotlin
@Composable
fun CardList(
    callbackForGoBackToLogin: () -> Unit,
) {
    var viewModel: CardListViewModel = CardListViewModel()
    val context = LocalContext.current
    val value by viewModel.repositories

    LaunchedEffect(key1 = Unit){
        viewModel.getReceipts(
            context = context,
        )
    }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(start = 16.dp, top = 8.dp, end = 16.dp, bottom = 8.dp)
    ) {
        // Content inside the Box
        if(!value.has_error){
            LazyColumn(
                verticalArrangement = Arrangement.spacedBy(12.dp),

                ) {
                items(value.result){ item ->
                    Surface(){
                        // 非同期で取ってきたデータに応じてカードを表示
                        Card(item)
                    }
                }
            }
        }else{
            if(value.error_message== APIErrorType.UNAUTHORIZED.content){
                // 今回はコールバックが渡されているので、もしエラーがあれば呼んでログイン画面まで引き戻したい
                callbackForGoBackToLogin()
            }
        }
}

```

このように記述すると、MyScreenにListが表示されなくなりました。

よく理解できていないので調査中。

もし詳しい方で教えていただける人いたらぜひお願いします。。


## 追記（解決済み）

```kotlin
@Composable
fun CardList() {
    var viewModel: CardListViewModel = CardListViewModel()
    val context = LocalContext.current
    val value by viewModel.repositories

```

```kotlin
@Composable
fun CardList() {
    var viewModel: CardListViewModel = CardListViewModel()
    val context = LocalContext.current
    val value by remember{viewModel.repositories}

```

とすることで(remember)をつけることで
解決しました。


@kenmaro