title: Compose navigation title is not updating
body: <p>I am trying to update the <code>title</code> of the <code>TopAppBar</code> based on a live data in the ViewModel, which I update on different screens. It looks like the live data is getting updated properly, but the update is not getting reflected on the title of the TopAppBar. Here is the code:</p>
  <pre><code>class MainActivity : ComponentActivity() {
      @ExperimentalFoundationApi
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContent {
              LazyVerticalGridActivityScreen()
          }
      }
  }
  
  @ExperimentalFoundationApi
  @Composable
  fun LazyVerticalGridActivityScreen(destinationViewModel: DestinationViewModel = viewModel()) {
      val navController = rememberNavController()
      var canPop by remember { mutableStateOf(false) }
  
      // getting the latest title value from the view model
      val title: String by destinationViewModel.title.observeAsState(&quot;&quot;)
      Log.d(&quot;MainActivity_title&quot;, title) // not getting called
  
      navController.addOnDestinationChangedListener { controller, _, _ -&gt;
          canPop = controller.previousBackStackEntry != null
      }
  
      val navigationIcon: (@Composable () -&gt; Unit)? =
          if (canPop) {
              {
                  IconButton(onClick = { navController.popBackStack() }) {
                      Icon(imageVector = Icons.Filled.ArrowBack, contentDescription = null)
                  }
              }
          } else {
              null
          }
  
      Scaffold(
          topBar = {
              TopAppBar(title = { Text(title) }, navigationIcon = navigationIcon) // updating the title
          },
          content = {
              NavHost(navController = navController, startDestination = &quot;home&quot;) {
                  composable(&quot;home&quot;) { HomeScreen(navController) }
                  composable(&quot;details/{listId}&quot;) { backStackEntry -&gt;
                      backStackEntry.arguments?.getString(&quot;listId&quot;)?.let { DetailsScreen(it, navController) }
                  }
              }
          }
      )
  }
  </code></pre>
  <pre><code>@ExperimentalFoundationApi
  @Composable
  fun HomeScreen(navController: NavHostController, destinationViewModel: DestinationViewModel = viewModel()) {
      val destinations = DestinationDataSource().loadData()
  
      // updating the title in the view model
      destinationViewModel.setTitle(&quot;Lazy Grid Layout&quot;)
  
      LazyVerticalGrid(
          cells = GridCells.Adaptive(minSize = 140.dp),
          contentPadding = PaddingValues(8.dp)
      ) {
          itemsIndexed(destinations) { index, destination -&gt;
              Row(Modifier.padding(8.dp)) {
                  ItemLayout(destination, index, navController)
              }
          }
      }
  }
  
  @Composable
  fun ItemLayout(
      destination: Destination,
      index: Int,
      navController: NavHostController
  ) {
      Column(
          verticalArrangement = Arrangement.Center,
          modifier = Modifier
              .background(MaterialTheme.colors.primaryVariant)
              .fillMaxWidth()
              .clickable {
                  navController.navigate(&quot;details/$index&quot;)
              }
      ) {
          Image(
              painter = painterResource(destination.photoId),
              contentDescription = stringResource(destination.nameId),
              modifier = Modifier.fillMaxWidth(),
              contentScale = ContentScale.Crop
          )
          Text(
              text = stringResource(destination.nameId),
              color = Color.White,
              fontSize = 14.sp,
              modifier = Modifier.padding(horizontal = 16.dp, vertical = 10.dp)
          )
      }
  }
  
  </code></pre>
  <pre><code>@Composable
  fun DetailsScreen(
      index: String,
      navController: NavController,
      destinationViewModel: DestinationViewModel = viewModel()
  ) {
      val dataSource = DestinationDataSource().loadData()
  
      val destination = dataSource[index.toInt()]
      val destinationName = stringResource(destination.nameId)
      val destinationDesc = stringResource(destination.descriptionId)
      val destinationImage = painterResource(destination.photoId)
  
      // updating the title in the view model
      destinationViewModel.setTitle(&quot;Destination Details&quot;)
  
      Column(
          modifier = Modifier
              .padding(16.dp)
              .fillMaxWidth()
              .verticalScroll(rememberScrollState())
      ) {
          Image(
              painter = destinationImage,
              contentDescription = destinationName,
              contentScale = ContentScale.Crop,
              modifier = Modifier.fillMaxWidth()
          )
          Column(modifier = Modifier.padding(horizontal = 16.dp)) {
              Text(
                  text = destinationName,
                  fontSize = 24.sp,
                  fontWeight = FontWeight.Bold,
                  modifier = Modifier.padding(vertical = 16.dp)
              )
              Text(text = destinationDesc, lineHeight = 24.sp)
              Row(horizontalArrangement = Arrangement.End, modifier = Modifier.fillMaxWidth()) {
                  OutlinedButton(
                      onClick = {
                          navController.navigate(&quot;home&quot;) {
                              popUpTo(&quot;home&quot;) { inclusive = true }
                          }
                      },
                      modifier = Modifier.padding(top = 24.dp)
                  ) {
                      Image(
                          imageVector = Icons.Filled.ArrowBack,
                          contentDescription = null,
                          colorFilter = ColorFilter.tint(MaterialTheme.colors.primaryVariant),
                          modifier = Modifier.size(20.dp)
                      )
                      Text(&quot;Back to Destinations&quot;, modifier = Modifier.padding(start = 16.dp))
                  }
              }
          }
      }
  }
  </code></pre>
  <p><strong>EDIT: The ViewModel</strong></p>
  <pre><code>class DestinationViewModel : ViewModel() {
  
      private var _title = MutableLiveData(&quot;&quot;)
      val title: LiveData&lt;String&gt;
          get() = _title
  
      fun setTitle(newTitle: String) {
          _title.value = newTitle
          Log.d(&quot;ViewModel_title&quot;, _title.value.toString())
          Log.d(&quot;ViewModelTitle&quot;, title.value.toString())
      }
  }
  </code></pre>
  <p>Can anyone please help to find the bug? Thanks!</p>
  <p><strong>Edit:</strong></p>
  <p>Here is the GitHub link of the project: <a href="https://github.com/rawhasan/compose-exercise-lazy-vertical-grid" rel="nofollow noreferrer">https://github.com/rawhasan/compose-exercise-lazy-vertical-grid</a></p>